JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example-content">
  Start Date:<input type="text" id="stDate"> &nbsp; End Date: <input type="text" id="endDate"> 
  Status:
  <select id="typeOfNote">
  <option value="OFF">Off</option>
  <option value="ON">On</option>
  <option value="SB">Sleeper Berth</option>
  <option value="D">Drive</option>
  <option value="YM">Yard Move</option>
  <option value="AdverseWeather">Adverse Driving</option>
  <option value="PC">Personal Conveyance</option>
  <option value="Exemption16H">Exemption 16 Hour</option>
  <option value="OFF, ON, SB, D">All Statuses</option>
  </select>
  <input type="submit" onclick="generateDutyStatusLogSearch();" value="Generate Report"><br><br>

<table id="demo-table" width="100%" class=" display hover"><thead><tr><th>Status</th><th>Name</th><th>State</th><th>Origin</th><th>Date</th></tr></thead></table>

	</div>

JavaScript

function generateDutyStatusLogSearch() {
	
    	var table = $('#demo-table').DataTable();
    	table.clear();
    	table.destroy();
    	
        var e = document.getElementById('typeOfNote');
        var strUser = e.options[e.selectedIndex].value;
        var startDate = document.getElementById("stDate").value,
        endDate = document.getElementById("endDate").value;
        
        if(!startDate || !endDate){
            alert("Please Select a Date Range");
        }
    	  api.call("Get", {
    	    "typeName": "DutyStatusLog",
    	    "search": {
        	    "fromDate" : startDate,
        	    "ToDate" : endDate,
        	  "statuses": [strUser]
			},
    	    resultsLimit: 5000

    	  }, function(dutyStatusLogs) {
    	    var uniqueDrivers = {};
    	    var multicall = [];
    	    dutyStatusLogs.forEach(d => {
    	      if (d.driver !== "NoUserId" && !uniqueDrivers[d.driver.id]) {
    	        uniqueDrivers[d.driver.id] = d.driver;
    	        multicall.push(["Get", {
    	          typeName: "User",
    	          search: {
    	            id: d.driver.id
    	          }
    	         
    	        }]);
    	      }
    	    });

    	    api.multiCall(multicall, function(drivers) {
    	      drivers.forEach(d => {
    	        uniqueDrivers[d[0].id] = d[0];
    	      });
    	      dutyStatusLogs.forEach(d => {
    	        d.driver = uniqueDrivers[d.driver.id];
    	      });
    	     console.log("Done: ", dutyStatusLogs)
    	     
    	$.each(dutyStatusLogs, function(index, value) {
    	       
    	            var json = dutyStatusLogs;	
    	        	        
    	        	  	var tr;
    	       for (var i = 0; i < json.length; i++) {

    				//list all variables here
    	        		var dateFieldValue= json[i].dateTime;
  	    	        	var d = new Date(dateFieldValue);
  						var n = d.toUTCString();
  						var tmpDate = new Date(n);
						var date = new Date(tmpDate);
						var year=date.getFullYear();
						var...