clone dom sort and rename

jquery clone dom sort and rename

by gregor

HTML

<div class="wrapper">
  <div class="cloneobject" id="id0">id0 (clone object)</div>
</div>

CSS

.cloneobject {
  width: 200px;
  height: 40px;
  margin: 10px auto;
  line-height: 40px;
  text-align: center;
  background: red;
  color: white;
  font-family: sans-serif;
}
#id0 {
  background: darkred;
}
#id3 {
  background: lightblue;
}

JavaScript

$(document).ready(function() {
    var e = $('.cloneobject');
    // count backwards for the correct order
    for (var i = 5; i > 0; i--) {
      e
      .clone()
      .attr('id', 'id'+ i)
      .insertAfter(e)
      .text('id'+ i); // for testing
    }
    
    // feel free to change the clone
    $('#id3').css( "color", "red" );
});