How to avoid duplicate id when cloning elements?

Question

What would be a good strategy for dealing with duplicated id's when using jquery clone method? For example, i need to clone a button in a unspecified number of times. Which is the best way for generating unique id's and keep track of it?

<div id="button-pool">
    <button id="bt1" class="return">Button</button>
</div>

$(document).ready(function(){
    $("#bt1").click(function(){
       var newButton = $(this).clone();
        $("#button-pool").append(newButton);
    });
});

http://jsfiddle.net/uv95nzrk/

Have you considered assigning all your buttons a common class and attaching the click function that way instead of through ids? — UtopiaLtd, Sep 18 '14 at 16:12
possible duplicate of [Clone in JQuery and adding unique IDs for each](http://stackoverflow.com/questions/8711970/clone-in-jquery-and-adding-unique-ids-for-each) — andy, Sep 18 '14 at 16:15

score 3 · Answer 1 · answered Sep 18 '14 at 16:14

Utilizing Classes to acheive this is a much better strategy, bloating your DOM with generated ID's is not really a great idea. (Poor Design Practice)

<div id="button-pool">
    <button class="btns" custom-attr='1' class="return">Button</button>
</div>

$(document).ready(function(){
    $(".btns").click(function(){
       var newButton = $(this).clone();
        newButton.attr('custom-attr', parseInt(newButton.attr('custom-attr'))+1);
        $("#button-pool").append(newButton);
    });
});

You can also use custom attributes to track your buttons so that they're still unique from one another, but they don't really need to have ID's

LcSalazar · Accepted Answer · 2014-09-18T16:21:08.907

You can use an Attribute StartsWith Selector to see how many buttons with that same id naming style already exists:

"button[id^='bt']"

And append it increasing it by 1:

$(document).ready(function(){
    $("#bt1").click(function(){
        var idcount = $("button[id^='bt']").length;
        
        var newButton = $(this).clone();
        newButton.attr("id", "bt" + (idcount + 1));
        $("#button-pool").append(newButton);
    });
});

.return{
    background-color: yellow;
}
#bt1{
    border: 2px solid navy;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="button-pool">
    <button id="bt1" class="return">Button</button>
</div>

JotaBe · Answer 3 · 2014-09-18T16:17:39.233

You can use a simple counter, and append it to the button id. This counter should be inside a closure not to interfere with the rest of the scripts in your page;

$(document).ready(function(){
  var btnId = 1; // This is a safe place, inside a closure (function body).
  $("#bt1").click(function(){
      var newButton = $(this).clone();
      newButton.attr('id','btn' + btnId);
      btnId++; // Increment after creating each new button
      $("#button-pool").append(newButton);
  });
});

You can also create the buttons without ids, unless you really need them. Why do you need to keep track of them?

score 0 · Answer 4 · answered Sep 18 '14 at 16:13

0

Something like this should work

var count = 0;
$("#bt1").click(function(){
   var newButton = $(this).clone();
    newButton.attr("id", "bt"+count);
    $("#button-pool").append(newButton);
    count++;
});

answered Sep 18 '14 at 16:13

Jimmy

2,805
6
43
57

web hobbit · Answer 5 · 2014-09-18T16:25:16.053

0

$(document).ready(function(){
    $("body").on('click','#bt1',function(){
       var newButton = $(this).clone();
        $("#button-pool").append(newButton);
    });
});

edited Sep 18 '14 at 16:25

answered Sep 18 '14 at 16:15

web hobbit

501
4
17

score 0 · Answer 6 · answered Sep 18 '14 at 16:25

0

easy answer is use class instead of id.

answered Sep 18 '14 at 16:25

Suchit kumar

11,809
3
22
44

How to avoid duplicate id when cloning elements?

6 Answers6