JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h3 style="color:red;font-size:15px">Main Table</h3>
<div class="tab-content">
<table id="mainTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Calvin</td>
      <td>Ananda</td>
    </tr>
    <tr>
      <td>Kampung</td>
      <td>Marketer</td>
    </tr>
  </tbody>
</table>
<br>
<input type="button" class="submitButton" value="ADD NEW TABLE">
<br>
<br>
<!-- New Table Goes Here -->

</div>

CSS

html {
  background: repeat-x scroll 0 0;
  overflow-y: scroll;
}

body {
  background: no-repeat scroll center top transparent;
  font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
  font-size: 11px;
  margin: 0;
  min-height: 100%;
  padding: 0 0 20px;
}

table th {
  background: black;
  color: white;
}

JavaScript

$(document).ready(function(){
var mainTable = $('#mainTable').dataTable({
  "bStateSave": true,
  "stateSave": true,
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bInfo": false,
  "bAutoWidth": false
});

/*SELECT OPTION */
mainTable.on('click', 'tbody tr', function() {
  $(this).toggleClass('selected');
});

$('#copyToTable1,#copyToTable2,#copyToTable3').on('click', function() {
  let $elem = $(this);
  var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, ''));
  var tbl_id = table.attr('id');

  var $row = mainTable.find(".selected");
  if (!$row.length) {
    console.log('You must select some rows to copy first');
    return;
  } else {
    var r = confirm("Copy to table " + tbl_id + "?");
    var table_to_copy = table.dataTable();
    if (r == true) {
      copyRows(mainTable, table_to_copy);
      console.log("Copied!");
      setTimeout('console.clear()', 2000);
    }
  }
});

/* FROM HERE SAVE ROW ================*/

function copyRows(fromTable, toTable) {
  var $row = fromTable.find(".selected"),
    storageName = 'dataSet_' + toTable.attr('id'), //added this line 
    dataSet = localStorage.getItem(storageName) ? JSON.parse(localStorage.getItem(storageName)): []; //added this line 

      $.each($row, function(k, v) {
        if (this !== null) {
          addRow = fromTable.fnGetData(this);
          toTable.fnAddData(addRow);
          dataSet.push(addRow); //added this line 
        }
      });

      localStorage.setItem(storageName, JSON.stringify(dataSet)); //added this line 
    }
});
/* ---------------- New Table Goes Here ---------------*/

/* CREATE TABLE FITURE */
$('.submitButton').click(function() {
  function getTableList() {
    var addTable = '<button id="copyToTable' + localStorage.Index + '" >copyToTable ' + localStorage.Index + '</button>' +
      '<table id="table' + localStorage.Index + '" class="table table-bordered table-hover myFade dynamicTable">' +
      '<thead>' +
      '<tr>' +
     ...