JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<script src="https://raw.githack.com/metallurgical/jquery-metal-clone/master/jquery.metalClone.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/metallurgical/jquery-metal-clone/master/metalClone.css">
<button id='btnClone'>
  Clone
</button>
<div class="to-clone">
  A
</div>

<div class="to-clone">
  B
</div>

<div class="to-clone">
  C
</div>

JavaScript

$('.to-clone:first').metalClone({
  btnClone: '#btnClone',
  onStart: function(element) {
    var regex = /(metalElement\d{0,})/g;
    var otherElem = $('.to-clone').not(element);
    
    otherElem.addClass(element.attr('class'));
    
    otherElem.append($('<button/>', {
      type: 'button',
      class: element.attr('class').match(regex) + 'BtnRemove metal-btn-remove',
      text: 'Remove',
      'data-metal-ref': '.' + element.attr('class').match(regex)
    }));
  }
})