JSFiddle - React, Tailwind, and code Playground

by aman1981

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>
<br><br>

Table 1

<div style="width:50%">
<table class="table table-bordered">
  <thead class="mbhead">
    <tr class="mbrow">
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>  
       <th>Gender</th>  
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td>
        <span data-bind="text: id"></span>
      </td>
      <td>
        <span data-bind="text: firstName"></span>
      </td>
      <td>
        <span data-bind="text: lastName"></span>
      </td>  
      <td>
        <select class="form-control">
           <option value="">--Select--</option>
           <option value="m">Male</option>
           <option value="f">Female</option>          
         </select>
      </td>
    </tr>
  </tbody>
</table>

<br>

Table 2

<table class="table table-bordered">
  <thead class="mbhead">
    <tr class="mbrow">
      <th>Position</th>
      <th>Salary</th>
      <th>Department</th>         
    </tr>
  </thead>
  <tbody data-bind="foreach: employee">
    <tr>
      <td>
        <input type="text" class="form-control textbox" />
      </td>
      <td>
         <input type="text" class="form-control textbox" />
      </td>
      <td>
        <input type="text" class="form-control...

CSS

.invalidRow {
  background-color: #ffb8b5;
}

JavaScript

(function() {
  var ViewModel = function() {
    var self = this;
    
    self.items = ko.observableArray([
        { id: "1", firstName: "Bob", lastName: "Hen"},
        { id: "2", firstName: "Henry", lastName: "Arman"} 
    ] ); 
    
    self.employee = ko.observableArray([]);
    
    self.add = function() {
      self.employee.push(new Employee());
    };

    self.remove = function(data) {
      self.employee.remove(data);
    };
    
   self.Save = function() {
      alert('Saved');
    };
  }

  var Item = function(fname, lname, id) {
    var self = this;
    
    self.id = ko.observable(id);
    self.firstName = ko.observable(fname);
    self.lastName = ko.observable(lname);
  };
 var Employee = function(pos, sal, dep) {
    var self = this;
    
    };
  vm = new ViewModel()
  ko.applyBindings(vm);

})();