JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
    <tbody data-bind="foreach: incidents">
        <tr>
            <td data-bind="text: ID"></td>
            <td data-bind="text: Description"></td>
            <td data-bind="text: Incident"></td>
            <td><button type='button' value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: $parent.currentIncident">Edit</button></td>
        </tr>
    </tbody>
</table>
<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident">New</button> 

<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
            <h3>Edit Incident <span data-bind="text: ID"></span></h3> Description:
      <input type="text" data-bind="value: Description">
    <br> Incident:
    <input type="text" data-bind="value: Incident">
      </div>
      <div class="modal-footer">
         <button data-bind="click: save">Save</button>
         <button data-bind="click: DeleteIncident">Delete</button>
         <button data-bind="click: $parent.clearCurrentIncident">Close</button>
      </div>
    </div>

  </div>
</div>


<hr>



<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

/* global ko, $ */
function Incident(data) {
    var self = this;
    self.ID = data.ID;
    self.Description = ko.observable(data.Description);
    self.Incident = ko.observable(data.Incident);
}
Incident.BASE_URL = '../../../../_vti_bin/listData.svc/GDI_PROD_Incidents';
Incident.CREATE_HEADERS = {
    "accept": "application/json;odata=verbose"
};
Incident.UPDATE_HEADERS = {
    "accept": "application/json;odata=verbose",
    "If-Match": "*"
};
Incident.prototype.save = function() {
$('#myModal').modal('hide');
    var id = this.ID,
        url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');

    return $.ajax(url, {
        type: id ? "MERGE" : "POST",
        data: ko.toJS({
            Description: this.Description,
            Incident: this.Incident
        }),
        processData: false,
        contentType: "application/json;odata=verbose",
        headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
       	success: function (data) {
				console.log("Record was sucessfully saved.");
				
				}
    });
    
};

function IncidentList(data) {
    var self = this;
    self.incidents = ko.observableArray();
    self.currentIncident = ko.observable();

   	self.DeleteIncident = function(RemoveSelectedIncident) {
	       $('#myModal').modal('hide');
         var id = this.ID;
         self.incidents.remove(RemoveSelectedIncident);
	       console.log("Record was sucessfully deleted.");
					
	  } 

    self.clearCurrentIncident = function() {
       $('#myModal').modal('hide');
        self.currentIncident(null);
        
    };
		
    self.AddNewIncident = function() {
    var id = this.ID;
    $('#myModal').modal('show')
		 self.currentIncident(null);
     ;
		};


    // list filter & automatic loading
    self.filter = ko.observable("");
    self.orderby = ko.observable("");
    self.params = ko.computed(function() {
        return ko.toJS({
            $filter: self.filter,
            $orderby: self.orderby
        });
  ...