LocalStorage new Table

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<input type="button" class="submitButton" value="ADD NEW TABLE">

<div class="tab-content">
  <div class="tab-pane" id="mainFolder">
    <h3>DEFAULT TABLE</h3>
    <div class="zf-table">
      <table id="mainTable" class="table table-bordered table-hover myFade">
        <thead>
          <tr>
            <th style="border-color:rgb(221, 221, 221);">&nbsp;</th>
            <th>Audience Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Date Created</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>          
        </tbody>
      </table>
    </div>
  </div>

</div>

JavaScript

// Defaul Table 


/* CREATE TABLE FITURE */
$('.submitButton').click(function() {
  function getTableList() {
    var addTable = '<div class="tab-pane" id="folder' + localStorage.Index + '">' +
      '<div class="zf-table">' +
      '<table id="table' + localStorage.Index + '" class="table table-bordered table-hover myFade dynamicTable">' +
      '<thead>' +
      '<tr>' +
      '<th style="border-color:rgb(221, 221, 221);">&nbsp;</th>' +
      '<th>Audience Name</th>' +
      '<th>Type</th>' +
      '<th>Size</th>' +
      '<th>Date Created</th>' +
      '<th>Action</th>' +
      '</tr>' +
      '</thead><tbody></tbody>' +
      '</table>' +
      '</div>' +
      '</div>';
    return addTable;
  }

  if (true) {
    /** INDEX FOR INCREMENT ID **/
    if (typeof(Storage) !== "undefined") {
      if (localStorage.Index) {
        localStorage.Index = Number(localStorage.Index) + 1;
      } else {
        localStorage.Index = 1;
      }
    } // if storage

    var resultTable = JSON.parse(localStorage.getItem("tableList"));
    if (resultTable == null) {
      resultTable = [];
    }
    let newtableHTML = getTableList();
    resultTable.push({
      table: newtableHTML
    });
    // save the new resultFolder array
    localStorage.setItem("tableList", JSON.stringify(resultTable));

    /* append Table baru */
    $('.tab-content').append(newtableHTML);
    var newTable = $("#table" + localStorage.Index).dataTable();
    alert("sucess create table");

  } else {
    alert("Failed create Table");
  }
}); // submitButton func


//on init fill the table-content
$(document).ready(function() { 

$("#mainTable").dataTable();

var resultTable = JSON.parse(localStorage.getItem("tableList"));
if (resultTable != null) {
  //get the nav reference in DOM
  let tableContent = $(".tab-content");

  //clear the html contents
  tableContent.html('');

  for (var i = 0; i < resultTable.length; i++) {
    var items = resultTable[i];
    $(".tab-content").append(items.table);
 ...