在不使用新div的情况下克隆jquery中的2个相似元素

Question

我有一个有2个下拉列表和一个文本框的表单,我需要立即克隆所有这些限制为5个div并且还增加id或名称,我可以使用一个div中的两个不同元素但是面临问题一次两个相同的元素,因为它两者都采用相似的id.我用过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/