在jQuery中单击按钮时如何添加新文本框？

我正在尝试添加新的div，当单击add按钮时，它包含4个文本框。我必须这样做3次。

问题是我只能做第一次，那就是：我不知道如何增加ID。我正在使用jQuery fadeIn效果

我找到了一些有用的答案，但我不能用它们来解决我的问题。我找到的最接近的答案是，但这是一个适用于每一次的答案。我只想要三次。我的参考是，这也是唯一一次。
我怎么能重复三次呢

do：

var counter = 1;
$("#addBtn").click(function () {
    if(counter <= 4) {
    var $input = $("<input />", {
        type: "text",
        id: "input_" + (counter),
        name: "some_name",
        value: ""
    });
  $("#container").append($input);
    counter++;
    }
});

var计数器=1；
$（“#添加BTN”）。单击（函数（）{
如果（counter您正在寻找以下内容：

演示：

标记：



JS:

var i=1；//跟踪div数的计数器
$（“#btn”）。单击（函数（）{
如果（i<4）{//检查是否创建了三个div
//创建一个div并使用id的索引
变量$d=$（“”{
id:“d”+i，
类别：“容器”
});
//用于创建4个输入的循环
对于（n=1；n<5；n++）{
//创建输入并使用id的索引
变量$i=$（“”{
键入：“文本”，
id:“i”+n，
占位符：“i”+n
});
//将输入附加到div
$d.i；
}
//将div附加到包装器
$（'#wrap'）。追加（$d）；
//增加用于创建div的索引
i++；
}
});
请发布您的代码。第四次单击wt abt…如果用户第四次单击。您不能使用一个全局变量，并在每次添加动态元素时递增它，并检查它是否等于3My code太长，无法注释，因为有4个文本框的4个div。@PeterI将尝试@Nitin Varpe。谢谢Hanks Sudhir。我将尝试^对我来说；）你可以在新生成的输入中添加一个类（例如，“appendedInput”）并通过“$”（“#container”）.children（“.appendedInput”）.length；”获得“counter”。我稍微修改了Sudhir的演示，它在这里：哦，是的，亲爱的！我标记了你的答案^ ^真的谢谢！！！注释使你的答案完美。Thx！！
<input type="button" id="btn" value="Add" />
<div id="wrap"></div>

var i = 1; // counter to track number of divs
$("#btn").click(function () {
    if (i < 4) { // check if three divs have been created

        // create a div and use index for id
        var $d = $("<div />", {
            id: "d" + i,
            class: 'container'
        });

        // loop for creating 4 inputs
        for (n = 1; n < 5; n++) {
            // create an input and use index for id
            var $i = $("<input />", {
                type: "text",
                id: "i" + n,
                placeholder: "i" + n
            });

            // append the input to the div
            $d.append($i);
        }
        // append the div to the wrapper
        $('#wrap').append($d);

        // increment the index for div creation
        i++;
    }
});