JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="exampleTable">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
    </tbody>
 </table>

<table id="exampleTable2">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
    </tbody>
 </table>

<button id="addRows">add</button>

JavaScript

var table3 = $('#exampleTable').DataTable({
    data:[{ "Year": "2012", "Month": "January", "Savings": "$100" },
          { "Year": "2012", "Month": "February", "Savings": "$80" }],
    columns:[
    {data: 'Year'},
    {data: "Month"},
    {data: "Savings"}]
                   }); 

var table4 = $('#exampleTable2').DataTable();

$('#addRows').on( 'click', function () { 
    table3.rows.add(
       [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" },
         {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }]
    ).draw(); 
    
     table4.rows.add(
       [[ "Tiger Nixon", "System Architect","$3,120" ],
         ["Tiger Nixon", "System Architect", "$3,120" ]]
    ).draw(); 
});


$('#addRows').click();