Клонирование 2 подобных элемента в jquery без использования нового div

Question

У меня есть форма с двумя выпадающими списками и одним текстовым полем, мне нужно клонировать все их сразу, ограничивая их до 5 div, а также увеличивая идентификатор или имя, я мог бы сделайте это, используя два разных элемента в одном div, но столкнувшись с проблемой с двумя одинаковыми элементами одновременно, так как для них одинаковый идентификатор. Я использовал Fiddle_Demo

Мой HTML-код:

<div id="elements"> 

<div id="Outer_00"> 
    <select name="Type" id="Type_00" disabled="disabled" class="edit"> 
<option value="ArtistType" selected="selected">Artist Type </option> 
<option value="Singer">Singer</option> 
<option value="Actor">Actor</option> 
<option value="Fighter">Fighter</option> 
<option value="Editor">Editor</option> 
<option value="Writer">Writer</option> 
</select> 
&nbsp; &nbsp; 
<select name="ASubType" id="ASubType_00" disabled="disabled" class="edit"> 
<option value="Artist Sub-Type" selected="selected">Artist Sub-Type</option> 
<option value="Actor" >-----Actor-----</option> 
<option value="Comedian" >Comedian</option> 
<option value="Hero" >Hero</option> 
<option value="Villain" >Villain</option> 
    <option value="Supporting Cast" >Supporting Cast</option> 
<option value="Singer" >-----Singer-----</option> 
<option value="Folk" >Folk</option> 
<option value="Pop" >Pop</option> 
<option value="Movie" >Movie</option> 

</select> 
&nbsp; &nbsp; 
<input type="text" placeholder="Quantity" name="Quantity" id="Quantity_00" disabled="disabled" class="edit" onkeypress="return numberOnly(this, event)" title="You can only enter numbers upto 3 " maxlength="3" /> 


</div > 

</div> 

Answer 1

это ваш ответ:

var counter = 1; 

$("#btnAdd").click(function() { 
    if (counter <= 4) { 
     counter++ 
     var innerCounter = 0; 
     $('#elements').find(".innerDiv:last").clone().appendTo("#elements").find('select').each(function() { 
      innerCounter++; 
      $(this).attr({ 
       'name': 'ddl_' + counter + innerCounter, 
        'id': 'ddl_' + counter + innerCounter 
      }) 
     }).next('input') 
      .attr({ 
      'name': 'inText_' + counter, 
       'id': 'inText_' + counter 
     }) 
    } 
}); 

http://jsfiddle.net/realdeepak/hGG3V/3/

Answer 2

если ваш идентификационный код работает, чем проверить его решить,

// попробовать этот

var counter = 1; 

$("#btnAdd").click(function() { 
counter+=1; 
if(counter <= 5) { 
$('table').find("tr:eq(1)").clone().appendTo("table").find('select') 
     .attr({ 
       'name': 'ddl_' + counter, 
       'id' : 'ddl_' + counter 
      }) 
      .closest('td').next('td').find('input') 
      .attr({ 
       'name': 'ddl_' + counter, 
       'id' : 'ddl_' + counter 
      }) 
} 
}); 

click here

Answer 3

Вы можете использовать как;

var counter = 1; 

$("#btnAdd").click(function() { 
    if(counter <= 5) { 
    counter++ 
     var innerCounter = 0; 
     $('table').find("tr:eq(1)").clone().appendTo("table").find('select').each(function() { 
      innerCounter++; 
      $(this).attr({ 
        'name': 'ddl_' + counter + innerCounter, 
        'id' : 'ddl_' + counter +innerCounter 
       }) 
     }).closest('td').next('td').find('input') 
       .attr({ 
        'name': 'ddl_' + counter, 
        'id' : 'ddl_' + counter 
       }) 
    } 
}); 

Вот рабочий пример: http://jsfiddle.net/UkzU3/3/