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>
<input type="button" class="submitButton" value="ADD NEW TABLE">
<input type="button" class="clearButton" value="CLEAR TABLES">

<h3 style="color:red;">Select Row</h3>
<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Calvin</td>
      <td>Ananda</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Kampung</td>
      <td>Marketer</td>
      <td>-</td>
    </tr>
  </tbody>
</table>
<br>
<!-- <button class="btn btn-success" id="copyToTable2"> Copy To Table 2</button> -->

<!-- <h3 style="color:red;">Table 2</h3>
<table id="table2" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>

<button class="btn btn-success" id="copyToTable3"> Copy To Table 3</button>
<h3 style="color:red;">Table 3</h3>
<table id="table3" class="table table-striped table-bordered" cellspacing="0" width="100%"></table> -->

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

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

$(document).ready(function(){
		var localtbl = localStorage.getItem('tableList');
    
    var resultTable = [];
    if(localtbl !== undefined && localtbl !== ''){
    resultTable = JSON.parse(localtbl);
    }
 		$.each(resultTable, function(i,v){
		        $('#table1_wrapper').append(v.table);
            
    $('table[id^="table'+(i+2)+'"]').dataTable({
      "data": localStorage.getItem('dataSet_table' + (i+2)) ? JSON.parse(localStorage.getItem('dataSet_table' + (i+2))) : [], //changed here
      "columns": [{
        "title": "First Name"
      }, {
        "title": "Last Name"
      }, {
        "title": "Action"
      }],
      "bStateSave": true,
      "stateSave": true,
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false
    });

      })
})

/* CREATE TABLE FITURE */
$('.submitButton').click(function() {
  
  var tblcount = ($('table[id^="table"]').length + 1);
  
/*     var addTable = '<h3 style="color:red;">Table '+(tblcount)+'</h3>' +
      '<table id="table'+tblcount+'" class="table table-striped table-bordered" cellspacing="0" width="100%">' +
      '<thead><tr><th>First Name</th><th>Last Name</th><th>Action</th></tr></thead>' +
          '</table>'; */
    var addTable = '<br><button class="btn btn-success" id="copyToTable'+tblcount+'"> Copy To Table '+(tblcount)+'</button>' +
    '<h3 style="color:red;">Table '+(tblcount)+'</h3>' +
      '<table id="table'+tblcount+'" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>';
  	var getTbl = localStorage.getItem("tableList");
    var resultTable = [];
    if(getTbl !== undefined && getTbl !== ''){
    resultTable = JSON.parse(getTbl);
    }
    let newtableHTML = addTable;
    resultTable.push({
     ...