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>

CSS

#table_id > tbody > tr:first-child > td{
    background-color: #DFFB8E;
}

JavaScript

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

     "fnDrawCallback": function(oSettings) {
        alert('draw complete');
  var sortId = $("#opt_table").val();
  if (sortId == 1){
  alert('selected ID is 1');
  alert('reinserted');
        $("#table_id > tbody tr:first").before("<tr><td>"+ baseData +"</td><td>"+ baseData+"</td><td>"+ baseData+"</td></tr>");
         }
  
  
        
    // unlinks the first row from the table - to be placed _before_ the datatables init for #list
       
       

    // the datatables drawCallback for #table_id
    
       },
    'order': [
      [0, 'asc']
    ]

  });

});


var jsdata = [];

var baseData = [{
  "index1": "10",
  "index2": "10",
  "ID": "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;
  }
  

  
  $('#table_id').dataTable().fnClearTable();
  $('#table_id').dataTable().fnAddData(jsdata);
  
  
  
  
  
}