JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-header">
                        <div class="pull-right">
                          <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Create New Category</a>                    
                        </div>
                    </div>
<table id="categoryTbl" class="table table-bordered">
    <thead>
        <tr>
            <th>Category Name</th>
            <th>Category Description</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tableData">
        <tr data-bind="visible: isEdit">
            <td data-bind="text: categoryName"></td>
            <td data-bind="text: categoryDescription"></td>
            <td><a  href="#" data-bind="click:edit">Edit</a></td>
            <td><a href="#" data-bind="click:deleteRow">Delete</a></td>
        </tr>
        <tr data-bind="visible: isSave">
            <td>
                <input type="text" data-bind="value:categoryName">
                </td>
                <td>
                  <input type="text" data-bind="value:categoryDescription">   
                    </td> 
                    <td>
                        <a href="#" data-bind="click:save">Save</a>
                        <a href="#" data-bind="click:cancel">Cancel</a>
                    </td>
                    <td>
                        <a href="#" data-bind="click:deleteRow">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">Add New Category</h4>
                    
               ...

JavaScript

function loadData()
{
    //add json object to knockout observable array through ajax data
     $.ajax({
        type: "GET",
        url: "<?php echo $this->config->base_url('api/categoryList')?>",    
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
                //vm.tableData(result.aaData);
                vm.tableData.removeAll();
                //console.log(result.aaData);
                var i = 0;
                var lastActivity = getDateTime();
                for (var i = 0; i < result.aaData.length; i++) {
                    vm.tableData.push(new obj(result.aaData[i]["cat_clientId"],result.aaData[i]["categoryId"],result.aaData[i]["categoryName"],result.aaData[i]["categoryDescription"],result.aaData[i]["cat_last_activity"]));
                };

                oTable = $('#categoryTbl').dataTable();//Data Table
            },
            
        error: function (err) {
                alert("err");
            }
    }); //ajax

     vm.alertBox.hide();
}

$( document ).ready(function() {
  loadData();
});

//add new category
self.addCategory = function(){
        var validationResult = self.validationContext.Validate();

        if(validationResult.valid) {
            data={
                    categoryName : this.catName(),
                    categoryDescription : this.catDescription(),
                    last_activity : this.lastActivity()
                };

              $.ajax({
              type: "POST",
              url:"<?php echo base_url("/api/addCategory");?>",
              data: data,
              dataType: "JSON",
              success: function(response){
                console.log(data);
                $('#myModal').modal('hide');
                
                vm.alertBox.set("New Category successfully created",1);
 
              },
              error: function(){
                vm.alertBox.set("Oops! Something went wrong",0);
               ...