Question

I’m pretty sure I’m close but I don’t know what I’m missing:

var newId = 1;
$("#trigger").click(function(){
  $("#new-div").attr('id', 'new-div' +newId++).clone().appendTo("#myDiv");
});

I set breakpoints: I can see the counter auto-incrementing, but the cloned div does not appear where it should. I get no errors. HTML for this:

 <div id="secret-div" style="display: none;">
        <div>This is new div number </div>
      </div>
      <p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
    <div id="myDiv"></div>

Answer 1

The issue is that you’re changing the ID of your element before cloning and appending, resulting in 2 elements with the same ID, breaking your selector and code.

Fixed Live Demo

HTML:

<div id="secret-div" style="display:none;">
    <div>This is new div number <span class="spnNewDivNumber"></span></div>
</div>
<p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
<div id="myDiv"></div>​

JavaScript:

var newId = 1;
$("#trigger").click(function() {
    var $newSecretDiv = $("#secret-div").clone().attr('id', 'new-div' + newId++);
    $newSecretDiv.show().appendTo("#myDiv");
    $newSecretDiv.find('.spnNewDivNumber').text(newId - 1);
});​