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" data-bind="click: AddNewConditionRow" 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();


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


    
       var counter = 1;
        var table = $('#example').DataTable();
        self.AddNewConditionRow = function (data, event) {
            
            table.row.add({
                "id": "2",
                "name": "Tiger"
            }).draw(false);

            counter++;
        }

  };
      var data = [{
          "id": "0",
          "name": "Allan"
        },
        {
          "id": "1",
          "name": "Bob"
        }
      ];
      
  var table = $('#example').DataTable({
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      }
    ],
		"dom": '<"top"l>',
    "initComplete": function(settings, json) {
    	this.api().rows.add(data).draw(false);
    }
  });
  


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

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

})();