JQuery clone and change element ID

Question

I want to clone of this TR of a perticular table and changed its id accordinlgly.

<tr id="tr">
    <td class="row form-group">
        <input type="text" name="name" id="first">  
    </td>
    <td class="row form-group">
        <input type="text" name="name" id="second">
    </td>
    <td class="row form-group">
        <input type="text" name="name" id="third">
    </td>
    <td class="row form-group">
        <input type="text" name="name" id="forth">
    </td>
    <td class="text-center">
        <a href="#" disabled="disabled">
           <i class="fa fa-trash-o"></i>
        </a>
    </td>
</tr>

I have tried so far.

var cloneCount = 1;
$("#tr").clone().attr('id', 'id'+ cloneCount++).insertAfter("#tr");

but this is not liking to me.
Update : It generate/update id of TR but really i don't want this, actually i wanted to do is changed id's like first0,second0,third0,forth0 and first1,second1,third1,forth1 and so on. hope you understand all.

*but this is not liking to me.* -Not sure what this means, but Seems to be working. http://jsfiddle.net/pts6ss72/ : Try `$("#tr").clone().attr('id', $("#tr")[0].id+ cloneCount++)` if you need ID as `tr1,tr2...` — Shaunak D, Jun 26 '15 at 06:31

score 1 · Answer 1 · answered Jun 26 '15 at 07:31

1

http://jsfiddle.net/jdfxv0q6/1/

Here, I added a new class to the html (clonableDiv), and range goes first1, first2... if you want to start from first0, change to

.size-2

answered Jun 26 '15 at 07:31

Dejan Biljecki

595
1
5
26

score 0 · Answer 2 · answered Jun 26 '15 at 06:42

$("#tr").clone().attr('id', 'id'+ cloneCount++).insertAfter("#tr");

Above line will change only clone tr id.

You need to do the following to change input element id

$("#tr").clone().find('input').attr('id', function( i, val ){
     return val + cloneCount;
});

JQuery clone and change element ID

2 Answers2