JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
<div class="form-horizontal">
  <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead id="tableHeader">
      <tr>
        <th>Id</th>
        <th>Name</th>

      </tr>
    </thead>
  </table>
  <div class="col-xs-12 col-sm-6">
            <input type="submit" value="Add New Row" id="addNewRow" data-bind="click: AddRow" class="btn btn-primary" />
        </div>
</div>

JavaScript

(function() {
  var viewModel = function(vmData) {
    var self = this;

    self.list = ko.observableArray();
    self.gridSearch = function() {
      var currentRecords = self.list();
      var data = [{
          "id": "0",
          "name": "Allan"
        },
        {
          "id": "1",
          "name": "Bob"
        }
      ];

      if (currentRecords.length !== data.length) {
        self.list(data);
        return;
      }
    };

    self.list.subscribe(function(newJr) {
      var table = $("#example").DataTable();
      table.clear();
      table.rows.add(newJr).draw(false);
    });
    
    var counter = 1;
    self.AddRow = function (data, event) {
      var table = $('#example').DataTable();
      table.row.add([
        "id": counter +'.1',
        "name": counter +'.2'
      ]).draw(false);

      counter++;
    }

  };

  $('#example').DataTable({
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      }
    ],
"dom": '<"top"l>'

  });
  
    //var t = $('#example').DataTable();
    //var counter = 1;
 
    //$('#addNewRow').on( 'click', function () {
    //    t.row.add( {
    //        "id": counter +'.1',
    //        "name": counter +'.2'
    //    } ).draw( false );
 
    //    counter++;
    //} );
 


  // DataTable
 // var table = $('#example').DataTable();
  //table.on('draw.dt', function() {});

  var pageVM = new viewModel();
  pageVM.gridSearch();
  ko.applyBindings(pageVM);

})();