jQuery에서 버튼을 클릭 할 때 새 텍스트 상자를 추가하는 방법은 무엇입니까?

Question

추가 버튼을 클릭하면 4 개의 텍스트 상자가 포함 된 새 div를 추가하려고합니다. 나는 이것을 3 번해야한다.

문제는 내가 처음으로 만들 수있는 것입니다. ID를 늘리는 방법을 모르겠습니다. 나는 jQuery 페이드 인 효과를 사용하고있다.

몇 가지 유용한 답변을 찾았지만 문제를 해결하는 데 사용할 수 없습니다. 내가 찾은 가장 가까운 대답은 here이지만, 그 중 하나는 항상 있습니다. 내가 원하는 것은 단지 3 번이다. 내 참조는 here이며 이것은 한 번뿐입니다.
어떻게 3 번 반복 할 수 있습니까?

Answer 1

이 같은 뭔가를 찾고 :

데모 : http://jsfiddle.net/abhitalks/r6A7f/2/

마크 업 :

<input type="button" id="btn" value="Add" /> 
<div id="wrap"></div> 

JS :

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++; 
    } 
}); 

Answer 2

는 수행

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++; 
    } 
}); 

데모 :: jsFiddle