JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-hover table-striped dataTable no-footer" id="openOrdersResults">
                <thead>
                    <tr id="resultsHeader" role="row">

                    <?php

                    $rpt = $_GET['rpt'];

                    switch($rpt) {

                        case "tabReport":
                        echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th id=\"tank3\">Tank</th><th>Total</th><th>Committed</th>";
                        break;

                        case "noTabReport":
                       echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th id=\"tank3\">Tank</th><th>Total</th><th>Committed</th>";
                        break;

                        case "exceptionReport":
                        echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th id=\"tank3\">Tank</th><th>Total</th><th>Committed</th>";
                        break;

                        case "rawDataReport":
                        echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th id=\"tank3\">Tank</th><th>Total</th><th>Committed</th>";
                        break;

                        case "lowestVolumeReport":
                        echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th id=\"tank3\">Tank</th><th>Total</th><th>Committed</th>";
                        break;

                        case "waterExceptionReport":
                        echo "<th>Fleet Point</th><th>Site</th><th>CorpID</th><th>Date</th><th>Time</th><th id=\"tank1\">Tank</th><th id=\"tank2\">Tank</th><th...

JavaScript

function submitTheForm() {

            var whatReport = $('input[name=reportTypeChoice]:checked', '#fuelWatchReport').val(); 

            event.preventDefault();
            
            var startwhen = $("#startDateValue").val();
            var endwhen = $("#endDateValue").val();

            startwhen = startwhen.replace(/\s+/g, '');

            var startReportYear = startwhen.slice(0,4);
            var startReportMonth = startwhen.slice(5,7);
            var startReportDay = startwhen.slice(8,10);
            var startReportHour = startwhen.slice(10,12);
            var startReportMinute = startwhen.slice(13,15);

            var startReportDate = startReportYear.concat(startReportMonth,startReportDay,startReportHour,startReportMinute);

            endwhen = endwhen.replace(/\s+/g, '');

            var endReportYear = endwhen.slice(0,4);
            var endReportMonth = endwhen.slice(5,7);
            var endReportDay = endwhen.slice(8,10);
            var endReportHour = endwhen.slice(10,12);
            var endReportMinute = endwhen.slice(13,15);

            var endReportDate = endReportYear.concat(endReportMonth,endReportDay,endReportHour,endReportMinute);


            var stationChoice = $("#siteGroup").val();
            var fleetPointChoice = $("#driverGroup").val();
            console.log("The Form Was Submitted" );

            $.ajax({
                url: "fuelwatchdata.php",
                data: { cid: globalCID, fleet: fleetPointChoice, site: stationChoice, startdate: startReportDate, enddate: endReportDate, report: whatReport },
                dataType: "json"
            }).done(function(data) {


                switch(whatReport) {
                    case "tabReport":
                        //$("#resultsHeader").replaceWith(" <th>Driver</th>");
                           alert(whatReport);
                           break;
                    case "noTabReport":

                        var tankidname = new Array();
              ...