jQuery cloning an element and changing attributes of child elements to keep them unique

Question

I've looked around at a few answers to similar questions but I don't fully understand the answers.

I have a form with a table in it which contains some inputs, as below...

<table class="form right 40 rewardclone_1">
<tr>        
<td><label for="financial_goal_1">Amount</label></td>
<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_1" class="text dollars" type="text" name="financial_goal_1" /> or more</td>
</tr>
<tr>
    <td><label for="maximum_1">Maximum</label></td>
<td><input id="maximum_1" class="text dollars" type="text" name="maximum_1" /> available (blank for unlimited)</td>
</tr>
<tr>
<td><label for="reward_1">Reward:</label></td>
<td><textarea id="reward_1" name="reward_1"></textarea></td>
</tr>
</table>

I've managed to create a button which clones this entire table when clicked.

$('#add_reward').click(function() {         
  $('.rewardclone').clone().appendTo('#rewards_container');     
});

The problem is I need all those numbers on the attributes (reward_1, maximum_1, etc.) to increment each time the table is cloned.

Any help would be greatly appreciated!

jQuery level: Beginner.

Thanks.

possible duplicate of [JQuery clone duplicate IDs](http://stackoverflow.com/questions/416081/jquery-clone-duplicate-ids) — cbp, May 09 '12 at 01:53

score 2 · Answer 1 · answered May 09 '12 at 01:54

This would be a simple solution for your case:

$('#add_reward').click(function() {         
    var $x = $('.rewardclone').clone();
    $x.appendTo('#rewards_container');
    $x.find('input[id], textarea[id], label[for]').each(function() {
        if($(this).is('label')) {
            var new_id = parseInt($(this).attr('for').split('_').pop(), 10) + 1;
            $(this).attr('for', new_id);
        } else {
            var new_id = parseInt(this.id.split('_').pop(), 10) + 1;
            this.id = new_id;
        }
    });     
});

+1 but if this is the simple solution, I don't want to imagine the complex solution... — Eran Medan, May 09 '12 at 02:15

score 2 · Accepted Answer · answered May 09 '12 at 02:00

Since it is a small table, I prefer using it as a template instead of cloning and finding matching elements.

Note: depending on the server technology, you can also load rewardTableTmpl from server for the first time and then use the template for further use.

DEMO

$(function() {
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' +
        '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' +
        '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' +
        '</tr><tr>' +
        '<td><label for="maximum_{NUM}">Maximum</label></td>' +
        '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' +
        '</tr><tr>' +
        '<td><label for="reward_{NUM}">Reward:</label></td>' +
        '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' +
         '</tr></table>';

    $('#add_reward').click(function() {
        $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, $('rewardclone').length + 1));
    });
});

In your function, you should use a counter. The class.lenth does not seem working when I print out the {NUM}. It's not changing. So I added 'var count =0; $('#add_reward').click(function() { count++; $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count)); });' — WoShiNiBaBa, Jan 08 '17 at 18:27

score 0 · Answer 3 · answered Jan 08 '17 at 18:30

I made a small adjustment to Selvakumar Arumugam's answer, because when I print out {NUM}, it's not changing.

$(function() {
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' +
        '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' +
        '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' +
        '</tr><tr>' +
        '<td><label for="maximum_{NUM}">Maximum</label></td>' +
        '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' +
        '</tr><tr>' +
        '<td><label for="reward_{NUM}">Reward:</label></td>' +
        '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' +
         '</tr></table>';

var count =0;
     $('#add_reward').click(function() {
         count++;
        $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count));
    });

});

jQuery cloning an element and changing attributes of child elements to keep them unique

3 Answers3