JSFiddle - React, Tailwind, and code Playground

by gregor

HTML

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

CSS

.cloneobject {
  width: 200px;
  height: 40px;
  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;
}

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('.cloneobject').find('.info').css( "background-color", "green");
    });
    
});