JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" style="width:100%"></table>
<button id="create">Create row</button>
<button id="refresh">Refresh table</button>

JavaScript

var dataSet = [
      [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ]
  ];
  
document.getElementById("create").onclick = function() { createTab() }; 

document.getElementById("refresh").onclick = function() { refreshTab() }; 
  
function createTab() {
  dataSet.push( ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"] );
  console.log(dataSet);
} 

function refreshTab() {
  var table = $('#example').DataTable();
	table.rows().invalidate().draw();
  console.log("resfresh completed");
} 

  
$(document).ready(function() {     
        $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });
});

console.log(dataSet);