clone dom sort and rename

jquery clone dom sort, rename and interaction

by gregor

HTML

<div class="wrapper">
  <div class="cloneobject" id="id0">
   <div class="row">
      <div class="info">
        Info
      </div>
      <div class="buttonfield">
        <a href="#" class="mybutton">do something</a>
      </div>
    </div>
    <div class="row">
      <div class="info">
        Info
      </div>
      <div class="buttonfield">
        <a href="#" class="mybutton">do something</a>
      </div>
    </div>
  </div>
</div>

CSS

.cloneobject {
  width: 200px;
  height: 80px;
  margin: 10px auto;
  text-align: center;
  background: red;
  color: white;
  font-family: sans-serif;
}
a {
  color: white;
}
.info {
  background: gray;
  height: 20px;
}
.buttonfield {
  height: 20px;
}
#id0 {
  background: darkred;
}
#id3 {
  background: blue;
}
.blubb {
  background: lime;
}

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" );
    
    // set interaction
    $('.mybutton').on('click', function(e){
      e.preventDefault();
      $(this).closest('.row').find('.info').removeClass('info').addClass('blubb');
    });
    
});