JSFiddle - React, Tailwind, and code Playground

JavaScript

let activeTab = $("#activeTab").val();
let dtOrder = $("#dtOrder").val();
let hasMultipleHeaderOrFooter = $("#hasMultipleHeaderOrFooter").val();
let reportID = $("#reportId").val();
let numCols = $("#numCols").val();
let reportTitle = $("#reportTitle").val();
let currentUserFirstName = $("#currentUserFirstName").val();
let currentUserLastName = $("#currentUserLastName").val();
let implodeFilterColumns = $("#implodeFilterColumns").val();
if (typeof implodeFilterColumns === 'undefined' || implodeFilterColumns == '') {
    implodeFilterColumns = [];
} else {
    implodeFilterColumns = implodeFilterColumns.split(',');
}
let todayMdy = $("#todayMdy").val();
let styleForPrint = $("#styleForPrint").val();
let reportCode = $("#reportCode").val();
let reportFooter = $("#reportFooter").val(); // true,false
let customButtons = $("#customButtons").val();
if (customButtons != '') {
    customButtons = customButtons.split(';');
}
let reportActions = $("#reportActions").val(); // json
let reportInputsVal = $("#reportInputs").val();
let exportHeaders = $("#export-headers").val();
reportInputs = {};
if (typeof reportInputsVal != 'undefined') {
    if (reportInputsVal.indexOf('#') > -1) {
        let _vars = reportInputsVal.split('#');
        $.each(_vars, function (index, data) {
            if (data.indexOf('@') > -1) {
                let _t = data.split('@');
                reportInputs[_t[0]] = (_t[1].indexOf(',') > -1) ? _t[1].split(',') : _t[1];
            }
        });
    } else {
        if (reportInputsVal.indexOf('@') > -1) {
            let _t = reportInputsVal.split('@');
            reportInputs[_t[0]] = _t[1].split(',');
        } else {
            let inputs = reportInputsVal.split('#');
            if (inputs.length > 0) {
                $.each(inputs, function (index, data) {
                    if (data != '') {
                        let _t = data.split('@');
                        reportInputs[_t[0]] =...