JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/theme.css">
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>

CSS

@CHARSET "ISO-8859-1";
/*
DATE PICKER time CSS
*/

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: center; margin-bottom: 0;}
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{...

JavaScript

var currentRow=0;
			validateText = function (value, colname) {

				 var row = $('#list').jqGrid('getRowData',currentRow);								
				 var name= row.firstname;
				 if(value!=name)
				 {						 
				
				  return [false, "value must match"];
				 }
				 
			  return [true];
			};

            "use strict";
            var mydata = [
                    {id:"1", idcustomers: "x", firstname: "y", lastname: "z"}
                ];
            $("#list").jqGrid({
			
			
                //url:'php.scripts/customers.get.php',
                //datatype: 'xml',
                //mtype: 'POST',
                datatype: "local",
                data: mydata,
                height: "auto",
                colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
                colModel :[
                    {name:'idcustomers', index:'idcustomers', width:55},
                    {name:'firstname', index:'firstname', width:90, editable: true},
                    {name:'lastname', index:'lastname', width:90, editable: true , "editrules":{"custom":true,"custom_func":validateText}},
                    {name:'address1', index:'address1', width:90, editable: true},
                    {name:'address2', index:'address2', width:90, editable: true},
                    {name:'city', index:'city', width:90, editable: true},
                    {name:'state', index:'state', width:90, editable: true},
                    {name:'zip', index:'zip', width:90, editable: true},
                    {name:'phone', index:'phone', width:90, editable: true},
                    {name:'email', index:'email', width:90, editable: true},
                    {name:'cell', index:'cell', width:90, editable: true}
                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'idcustomers',
                sortorder: 'asc',
                viewrecords: true,
 ...