在django表单集中动态添加行

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(label='姓名')
    phone = forms.CharField(label='电话号码')

<form id="contact-form">
    <div id="formset">
        <div class="form-row">
            <div class="form-field">
                <label for="id_name">姓名</label>
                <input type="text" name="name" id="id_name">
            </div>
            <div class="form-field">
                <label for="id_phone">电话号码</label>
                <input type="text" name="phone" id="id_phone">
            </div>
        </div>
    </div>
    <button type="button" id="add-row">添加联系人</button>
    <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 添加联系人行
    $('#add-row').click(function() {
        var formCount = $('#formset .form-row').length;
        var newForm = $('#formset .form-row:last').clone();

        // 更新新行的字段名称和ID
        newForm.find('input').each(function() {
            var name = $(this).attr('name').replace('-' + (formCount-1) + '-', '-' + formCount + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
        });

        // 插入新行
        $('#formset').append(newForm);
    });
});
</script>