JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table  table-hover table-bordered">
		<thead>
			<tr class="bgColor">
			    <td>S.no</td>
				<td>Role Name</td>
				<td>Action</td>
			</tr>
		</thead>
		<tbody id="content">
			 
		</tbody>
	</table>

<div class="col-lg-6 col-md-6 col-xs-12">
   	
    <div class="col-lg-1 col-md-2 col-xs-12 padding pull-right">
	<button class="col-lg-11 col-xs-12 bgColor" id="nextValue">Next</button>
	</div>	

	<div class="col-lg-1 col-md-2 col-xs-12 paginationList padding pull-right">
	</div>
	 <div class="col-lg-1 col-md-2 col-xs-12 padding pull-right">
	<button class="col-lg-11 col-xs-12 bgColor" id="PreValue">Pre</button>
	</div>
	 
</div>

JavaScript

var roleList = [{
"sNo"     :"1",
"roleName":"Designer"
},
{
"sNo"     :"2",
"roleName":"Developer"
},
{
"sNo"     :"3",
"roleName":"HR Dept"
},
{
"sNo"     :"4",
"roleName":"Project Manager"
},
{
"sNo"     :"5",
"roleName":"HR Dept"
},
{
"sNo"     :"6",
"roleName":"Project Manager"
},
{
"sNo"     :"7",
"roleName":"HR Dept"
},
{
"sNo"     :"8",
"roleName":"Project Manager"
},
{
"sNo"     :"9",
"roleName":"HR Dept"
},
{
"sNo"     :"10",
"roleName":"Project Manager"
},
{
"sNo"     :"11",
"roleName":"HR Dept"
},
{
"sNo"     :"12",
"roleName":"Project Manager"
},
{
"sNo"     :"13",
"roleName":"HR Dept"
},
{
"sNo"     :"14",
"roleName":"Project Manager"
}
];

$(document).ready(function () {
    empRoles()
    var table = $('#myTable');
    var sta = 0;
    var pageNum = 1;
    var elements_per_page = 3;
    var roleList;
    var limit = elements_per_page;

    $('#newroleName,#searchroleName').focus(function () {
        $('.requiredField').hide();
        $('#newroleName').removeClass('error');
    });
    $('.searchClear').click(function () {
        $('.requiredField').hide();
        $('#searchroleName').removeClass("error");
        $('#searchroleName').val("");
       empRoles()
    });


function empRoles() {
   
            pagination(roleList)
           
                $('#content').html('');
                for (var i = sta; i < limit; i++) {
                    var table = '<tr  id="' + roleList[i].Id + '"><td>' + (i + 1) + '</td><td class="roleName" id="name' + i + '">' + roleList[i].name + '</td><td><button  class="btn edit btn-info btn-sm" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success btn-sm" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger btn-sm" onclick="deleteRow(this)" data-dismiss="modal" id="dlt' + i + '"><i class="fa fa-trash-o"></i>Delete</button><button class="btn editCancel btn-danger btn-sm" id="editCancel' + i + '" ><i class="fa...