Javascript jQuery将ID增量添加到.html（）中，并在输入onchange和刷新onchange值后追加

我为这个冗长的标题道歉，但我还没有找到解决问题的办法。我是jQuery和web开发的新手，因此任何指导都将不胜感激

我有一个

，它允许用户输入一个值（数字），即他们希望填充一组输入字段的行数。下面是我的例子：

<div id="form">
<input id="num" name="num" type="text" />
</div>

<p>&nbsp;</p>

<div id="form2">
<form action="" method="post" class="form_main">
    <div class="data">
        <div class="item">
            <input id="name" name="name[]" type="text" placeholder="name" /><br/>
            <input id="age" name="age[]" type="text" placeholder="age" /><br/>
            <input id="city" name="city[]" type="text" placeholder="city" /><br/>
            <hr />
        </div>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

提交

我的jQuery：

<script>
var itemNum = 1;
$("#num").on("change", function() {
    var count = this.value; 
    var item = $(".item").parent().html();
    //item.attr('id', 'item' + itemNum);

    for(var i = 2; i <= count; i++) {
        itemNum++;
        $(".data").append(item);            
    }
})
</script>

var itemNum=1；
$（“#num”）。关于（“更改”，函数（）{
var count=这个值；
var item=$（“.item”）.parent（）.html（）；
//item.attr（'id'，'item'+itemNum）；
对于（var i=2；i这里是一个

var itemNum = 1;
$("#num").on("change", function() {

$('.data div').slice(1).remove();  //code for removing previously populated elements.
var count = this.value;
console.log(count);
var item; 
//item.attr('id', 'item' + itemNum);
var i;
for(i = 1; i <= count; i++) {
    console.log(i);
    item = $("#item0").clone().attr('id','item'+itemNum);


    //prevent duplicated ID's
    item.children('input[name="name[]"]').attr('id','name'+itemNum);      
    item.children('input[name="age[]"]').attr('id','age'+itemNum);   
    item.children('input[name="city[]"]').attr('id','city'+itemNum);

    itemNum++;
    $(".data").append(item);            
}
})

var itemNum=1；
$（“#num”）。关于（“更改”，函数（）{
$（'.data div'）.slice（1）.remove（）；//用于删除以前填充的元素的代码。
var count=这个值；
控制台日志（计数）；
var项目；
//item.attr（'id'，'item'+itemNum）；
var i；
对于（i=1；iTry

var itemNum=1，
item=$（“.data.item”）.parent（）.html（）；；
$（“#num”）。关于（“更改”，函数（）{
var count=+this.value；
if（itemNum

演示：
很难准确理解您想要的内容。其目的是，如果用户输入“3”，那么
及其子输入将被复制2次并添加到
？@StephenMuecke我想要
中的内容，并且在填充每个div时都会有一个id增量。就像
…id=“item3”>…etc
@shaunakde，当我使用clone时，它会附加2倍的数量。如果输入2，它会克隆项目2中的2个，如果输入3，它会克隆项目3中的3个。@StormParker然后将其更改为（var i=2；
这将导致输入的ID重复，因此您需要更新克隆的html。更新了注释@Storm Parker..now on duplicate ID。@shaunakde谢谢！当用户输入一个新的数字时，它会填充准确的行数，而不是添加到已填充的行数中。th也可以！在用户输入数字的第一次输入时刷新值如何？@StormParker抱歉，刷新什么数字？
var itemNum = 1,
    item = $(".data .item").parent().html();;
$("#num").on("change", function () {
    var count = +this.value;
    if (itemNum < count) {
        while (itemNum < count) {
            itemNum++;
            $(item).attr('id', 'item' + itemNum).appendTo('.data')
        }
    } else {
        itemNum = count < 1 ? 1 : count;
        $('.data .item').slice(itemNum).remove();
    }
})