CODEWITHSUNDEEP
jqueryhtml
Rebecca
Rebecca

Reputation: 413

Cloning 2 similar elements in jquery without using a new div

I have a form having 2 dropdowns and one textbox,i need to clone all of them at once limiting them to 5 divs and also incrementing the id or the name, i could do this using two different elements in one div but facing a problem with two same elements at a time as it takes the similar id for both. I used Fiddle_Demo

My html code is:

<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>

Upvotes: 0

Views: 88

Answers (3)

RealDeepak
RealDeepak

Reputation: 863

this is your answer:

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/

Upvotes: 6

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You can use like;

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

Here is a working demo: http://jsfiddle.net/UkzU3/3/

Upvotes: 1

JayDeep Nimavat
JayDeep Nimavat

Reputation: 476

if your id code is working than check it solve,

//try this

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

Upvotes: 0

Related Questions