JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" id="searchboxSample" name="lname" required
                                                   placeholder="searchboxSample" />

<table id="devtable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: paginated" >
    <tr data-bind="click: $parent.select, css: {flash: $parent.selected() === $data}">
      <td data-bind="text: ID"></td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Status"></td>
    </tr>
  </tbody>
</table>ID :
<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />
<br>
<input type="button" value="Send" disabled/>

<input type="button" value="ChangeModelData" data-bind="click: changeTableData">
<input type="text" id="lname" name="lname" required
                                                   placeholder="Nachname" data-bind="value: acceptedSymptom , event: {keyup: showMessage}"/>
<div class="pager">
 <a href="#" class="firstpage" data-bind="click: firstpage, visible: hasPrevious">&le;</a>
	<a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&le;</a>
	<span class="current" data-bind="text: $root.pageNumber"></span>
	<a href="#" class="next" data-bind="click: next, visible: hasNext">&gt;</a>
  <a href="#" class="lastpage" data-bind="click: lastpage, visible: hasNext">&ge;</a>
</div>

CSS

#devtable {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


#devtable th {
border-top: 1px solid #dddddd;
border-bottom:1px solid #dddddd;
background-color: #f0f0f5

}
#devtable td {
border-bottom:1px solid #dddddd;
}


#devtable td, #devtable th {    
    text-align: left;
    padding: 8px;
}

.flash { background-color: #b6bcdb; }

.previous{text-decoration: none;}

.previous {
    background-color: #f1f1f1;
    color: black;
}


.next{text-decoration: none; }
.lastpage{text-decoration: none; }

JavaScript

var RowModel = function(id, name, status) {
this.ID = ko.observable(id);
  this.Name = ko.observable(name);
  this.Status = ko.observable(status);
   
};

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

var myData = [{
  id: "001",
  name: "Jhon",
  status: "Single"
}, {
  id: "002",
  name: "Mike",
  status: "Married"
}, {
  id: "003",
  name: "Marrie",
  status: "Complicated"
},{
  id: "004",
  name: "Jhon",
  status: "Single"
}, {
  id: "005",
  name: "Mike",
  status: "Married"
}, {
  id: "006",
  name: "Marrie",
  status: "Complicated"
}, {
  id: "007",
  name: "Mike",
  status: "Married"
}, {
  id: "008",
  name: "Marrie",
  status: "Complicated"
}, {
  id: "009",
  name: "Mike",
  status: "Married"
}, {
  id: "010",
  name: "Marrie",
  status: "Complicated"
}
];

function MyVM(data) {
  var self = this;
  
  /*************
  Start of logic for Paging
  
  ******/
  
  
  self.items = ko.observableArray();
   this.all =  self.items;

 self.pageNumber = ko.observable(0);
    self.nbPerPage = 2;
    
    // I think this is somewhere I am missing the functionality.
    
    this.totalPages = ko.computed(function() {
		var div = Math.floor(self.all().length / self.nbPerPage);
		div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
		return div - 1;
	});

this.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.all.slice(first, first + self.nbPerPage);
    });
    
    this.hasPrevious = ko.computed(function() {
		return self.pageNumber() !== 0;
	});
  
  	this.hasNext = ko.computed(function() {
		return self.pageNumber() !== self.totalPages();
	});
  
  this.next = function() {
  	self.deselect();
		if(self.pageNumber() < self.totalPages()) {
			self.pageNumber(self.pageNumber() + 1);
		}
	}
  
  this.lastpage = function() {
  	self.deselect();
		if(self.pageNumber() < self.totalPages())...