JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<div>

  <select class="form-control" name="opt_table" id="opt_table">
    <option value="0">-</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button onclick="fnClickAddRow()">Add Rows</button>
</div>
<br />
<br />
<table id="table_id" class="display">
  <thead>
    <tr>
      <th>index1</th>
      <th>index2</th>
      <th>ID</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

$(document).ready(function() {
  $('#table_id').dataTable({
    "data": jsdata,

     "fnDrawCallback": function(oSettings) {
        alert('draw complete');
    // unlinks the first row from the table - to be placed _before_ the datatables init for #list
      // var row0 = $('#table_id tbody tr:first').detach()[0]

    // the datatables drawCallback for #list
    //  function drawCallback() {
    // re-insert the unlinked row at the top
      //   $('#table_id tbody tr:first').before(row0)
       //  }
       },
    'aaSortingFixed': [
      [2, 'asc']
    ]

  });

});


var jsdata = [];

var dataA = ["10", "10", "0"];
var dataB = ["20", "20", "0"];


function fnClickAddRow() {
  var jsdata = [];
  if ($('#opt_table').val() == "1") {
    alert('selected 1');
    var jsdata = [
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"],
      ["1", "1", "1"]
    ];
  } else if ($("#opt_table").val() == "2") {
    alert('selected 2')
    var jsdata = [
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"],
      ["2", "2", "2"]
    ];

  } else if ($("#opt_table").val() == "0") {
    alert('Select First')
    return false;
  }
  
  if (jsdata  && jsdata.length > 0) {
  alert ('data filled');
  var sortId = $("#opt_table").val();
  if (sortId == 1){
  alert('selected ID is 1');
  jsdata.push(dataA);
  }
  }
  
  $('#table_id').dataTable().fnClearTable();
  $('#table_id').dataTable().fnAddData(jsdata);
}