JSFiddle - React, Tailwind, and code Playground

by Evan Shoshan

HTML

<table id="statusTable" class="  table cell-border stripe hover" style="width: 100%;">
                   
                     <thead>
                        <tr>
                            <th>DL Name</th>
                            <th>Completed Jobs </th>
                            <th>Total Jobs</th>
                            <th>Percent</th>

                        </tr>
                    </thead>
                    <tbody style="text-align:center"></tbody>
                    <tfoot style="color: white;">
                        <tr style ="color:white;">
                            <th>DL Name</th>
                            <th>Completed Jobs</th>
                            <th>Total Jobs</th>
                            <th>Percent</th>
                        </tr>
                    </tfoot>

              
                </table>
            <table id="userTable" class=" table cell-border stripe hover" style="width: 100%;">
                   
                     <thead>
                        <tr>
                            <th>User Name</th>
                            <th>DL Name</th>
                            <th>DL Completed Jobs </th>
                            <th>DL Total Jobs</th>
                            <th>DL Percent</th>

                        </tr>
                    </thead>
                    <tbody style="text-align:center"></tbody>
                    <tfoot style="color: white;">
                        <tr style ="color:white;">
                            <th>User Name</th>
                            <th>DL Name</th>
                            <th>Completed Jobs</th>
                            <th>Total Jobs</th>
                            <th>Percent</th>
                        </tr>
                    </tfoot>

              
                </table>

JavaScript

function tableRender() {  

        var jobData = $("#DL_Status").val();
        var parsedData = jobData.split("\n");
        var finalDlData = [];
        for (var i = 1; i < parsedData.length - 1; i++) {
            var tempData = "";

            tempData = parsedData[i].split(",");
            try {
                finalDlData.push({
                    "DL_NAME": tempData[0],
                    "COMPLETED_JOBS": tempData[1],
                    "TOTAL_JOBS": tempData[2],
                    "PERCENT": tempData[3],
                });
            } catch (err) {
                console.log(err.message);

            }
        }
            var jobData2 = $("#Username_Status").val();
            var parsedData2 = jobData2.split("\n");
            var finalUserData = [];
            for (var j = 1; j < parsedData.length - 1; j++) {
                var tempData2 = "";
                tempData2 = parsedData2[j].split(",");
                try {
                    finalUserData.push({
                        "USERNAME": tempData2[0],
                        "DL_NAME": tempData2[1],
                        "COMPLETED_JOBS": tempData2[2],
                        "TOTAL_JOBS": tempData2[3],
                        "PERCENT": tempData2[4],
                    });
                } catch (err) {
                    console.log(err.message);

                }

            }

            $("#statusTable").dataTable().fnDestroy();
            $(document).ready(function () {
                var table = $("statusTable").DataTable({

                    stateSave: false,

                    "fixedHeader": true,
                    "dom": '<"toolbar">lfrtip ',
                    "autowidth": false,
                    "aaData": finalDlData,
                    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    "pageLength": 25,
                    "paging": true,
                    "lengthchange": true,
                    "Paginate":...