我有一个用于创建JSON数组的表单，请参阅我前面的问题以供参考。
在该表单中，用户可以通过点击按钮并填写所述额外细节来向表单添加额外细节。
然后，将它们以类似于下面的方式放置到数组中：

<input type="text" name="AdditionalCitizenship[0][CountryOfResidency]">
<input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]">
<input type="text" name="AdditionalCitizenship[1][CountryOfResidency]">
<input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]">

这将允许我通过递增数组索引来获取用户输入的尽可能多的细节。
我得到了这个脚本来添加额外的表单字段。

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap_tel"); //Fields wrapper
var add_button      = $(".add_field_button_tel"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><div class="row"><div class="form-group col-md-4"><label for="AdditionalTelephoneType">Telephone Type</label><input type="text" class="form-control" name="AdditionalTelephoneType[]" ></div><div class="form-group col-md-4"><label for="AdditionalTelephoneDialingCode">Dialing Code</label><input type="text" class="form-control" name="AdditionalTelephoneDialingCode[]"></div><div class="form-group col-md-4"><label for="AdditionalTelephoneNumber">Telephone Number</label><input type="text" class="form-control" name="AdditionalTelephoneNumber[]" ></div></div><a href="#" class="remove_field">Remove</a></div>'); //add input box

    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

我尝试按原样使用，但是在这个场景中，很难在创建的HTML中递增x，因为它似乎会破坏函数。
我可以像这样更迭代地创建HTML吗：
首先，将DIV结构创建为如下 Package 器：
var html = "<div></div>"
然后将输入追加到此变量input

var input = document.createElement("input");
input.type = "text";
input.name = "AdditionalTelephoneType[" + x"]";

...然后使用wrapper.append插入整个HTML块，并添加我之前创建的变量。