JSFiddle - React, Tailwind, and code Playground

by solomon099

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><button class="copy" id="copy-1">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><button class="copy" id="copy-2">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><button class="copy" id="copy-3">Copy</button></td>
    </tr>
  </tbody>
</table>

JavaScript

$(function(){

	var controller = function(num1){
    $('#copy-'+num1).click(function() {

      var $tableBody = $('#table_name').find("tbody"),
          $trLast = $tableBody.find("#tr-"+num1),
          $trNew = $trLast.clone();
          // $trNew.find('input').val('');
          $trLast.after($trNew);
          console.clear()
          // refresh_index();

    });
  }
  
  function refresh_index(){
  	$('#table_name > tbody > tr').each(function (i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

});