JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin:12px; padding:12px">




 
<form name="searchForm" id="searchForm" action="/mysprint/SearchServlet">



<br/>

<table width="800" >
<col width="180" />
  <col width="350" />
  <col width="300" />
	<tr>
		<td>Hardware Identifier:</td>
		<!-- onkeydown="validateNumberField(this,event);"   -->
		<td><input type="text" name="hardwareId" id="hardwareId" size="35" onkeyup="enableSearch();" /></td>
	</tr>
	<tr>
		<td>Sales Person's Code:</td>
		<td><input type="text" name="salesRepCode" id="salesRepCode" size="35" onkeyup="enableSearch();" /></td>
	</tr>
	<tr>
		<td>Install Person's Code:</td>
		<td><input type="text" name="installPersonCode" id="installPersonCode" size="35"  onkeyup="enableSearch();" /></td>
		<td id="email_error"></td>		
	</tr>
	<tr>
		<td>Contact Name:</td>
		<td><input type="text" name="contactName" id="contactName" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>Business Name:</td>
		<td><input type="text" name="businessName" id="businessName" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>Street Address:</td>
		<td><input type="text" name="streetAddress" id="streetAddress" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>City:</td>
		<td><input type="text" name="cityName" id="cityName" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>State:</td>
		<td><input type="text" name="state" id="state" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>Apt/Ste#:</td>
		<td><input type="text" name="aptSuite" id="aptSuite" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>Zip Code:</td>
		<td><input type="text" name="zipCd" id="zipCd" size="35" onkeyup="enableSearch();"/></td>
	</tr>
	<tr>
		<td>Customer email:</td>
		<td><input type="text" name="emailAddress" id="emailAddress" size="35" onchange="validateEmail();"/></td>
		<td id="email_error"></td>		
	</tr>
	<tr>
		<td>Customer Wireless Contact No:</td>
		<td><input type="text" name="phoneNumber"...

CSS

<link rel="stylesheet" type="text/css" 	href="../../css/table_style.css" />
<link rel="stylesheet" type="text/css" 	href="../../css/style.css" />
<link rel="stylesheet" type="text/css" 	href="../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" 	href="../../css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">

JavaScript

var jsonTableData = null;
	
$(function() {
    $('.activator').on("click", function(){
        var item_id = $(this).attr('id');
    	populateViewDetailsData(item_id);
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'80px'},0);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-1000px'},0,function(){
           $('#overlay').fadeOut('fast');
        });
    });
	$('#closeButton').click(function(){
        $('#box').animate({'top':'-1000px'},0,function(){
            $('#overlay').fadeOut('fast');
        });
    });
	$("#fromCreateDate").datepicker();
	$("#toCreateDate").datepicker();
});




	function showSearchResults(){
	
	var xmlhttp;    
	
	document.getElementById("progress").innerHTML="Loading...";
	document.getElementById("searchresults").innerHTML='';
	
	var formData = JSON.stringify($("form#searchForm").serializeObject()); 	
    alert(formData);
	$.ajax({
	data: {searchParams: JSON.stringify($("form#searchForm").serializeObject())},
	type: "POST",
	dataType: "json",
	jsonp: false,
	async:true,
	url: "http://144.229.209.38/mysprint/MagicBoxSearchServlet",
	timeout:300000,
	error: function(xhr, textStatus, errorThrown){		
		
		document.getElementById("searchresults").innerHTML=xhr.responseText;
		document.getElementById("progress").innerHTML="";
	},
	success: function(data) {
		var jsonString = JSON.stringify(data);
		var jsonData = JSON.parse(jsonString);
	    var oTable = $('#example').dataTable();
	   // oTable.fnClearTable();
	    loadTable(jsonData);
	    //oTable.fnAddData(jsonData);
	}
  });  

	

}

	function loadTable(jsonData) {
		
		$('#example').dataTable( {
	        "bProcessing": true,	        
	        "sAjaxDataProp": "",
	        "sAjaxSource": jsonData,
	        "bSort": false,
	        "bRetrieve": true,
	        /* "aoColumns": [ 
	                      { sWidth: "10%", bSearchable: false, bSortable: false }, 
	                      { sWidth: "10%",...