JSFiddle - React, Tailwind, and code Playground

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/Restaurant.master" AutoEventWireup="true"
    CodeFile="Closingstock.aspx.cs" Inherits="Restaurant_Closingstock" %>

<%@ Register Src="~/Components/SerachInfo.ascx" TagName="LookUp" TagPrefix="LU" %>
<%@ Register Src="~/components/CurrentDate.ascx" TagName="calender" TagPrefix="uc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../assets/css/LookUp.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #ContentPlaceHolder1_radiolist
        {
            border: none;
        }
        #ContentPlaceHolder1_radiolist tr td
        {
            width: 33%;
        }
        .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span
        {
            color: transparent;
        }
        .pull-right
        {
            margin: 0px 0px;
        }
        .row
        {
            margin-left: 0px;
            margin-right: 0px;
        }
        #cmask
        {
            display: none !important;
        }
        .col-md-1, .col-lg-1
        {
            padding: 0px;
        }
        .col-md-12
        {
            padding-left: 0px;
            padding-right: 0px;
        }
        .form-group
        {
            margin-bottom: 8px;
        }
        .panel-body
        {
            padding: 10px;
        }
        #ContentPlaceHolder1_radiolist label
        {
            padding: 0px 4px 0px 4px;
        }
        #ContentPlaceHolder1_radiolist tr td
        {
            width: unset;
        }
        div.dataTables_wrapper
        {
            border: 0px;
        }
        .panel-heading
        {
            padding: 0 0px;
        }
        .table_div
        {
            border-top: 1px solid #ddd;
            margin-top: 8px;
        }
        @media (min-width: 1100px)
        {
            #content
            {
                padding: 2px 6px 0px 4px;
            }
        }
   ...

JavaScript

function CreateTableFromJSON(Data, ID, RpType) {
    // $('#FOOTER').hide();
    $('#FOOTER').empty(); 
    var col = [];
    if ($.fn.dataTable.isDataTable('#example')) {
        table.destroy();
        $('#tblempDetails').empty();
    }
    for (var i = 0; i < Data.length; i++) {
        for (var key in Data[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    var HEADER = "";
    HEADER += "<tr>"
    var Footer = "";
    Footer += "<tr>"
    var Total1 = 0;
    var Total2 = 0;
    var Total3 = 0;
    var Total4 = 0;
    var Total5 = 0;
    var Total6 = 0;
    var Total7 = 0;
    var Total8 = 0;
    var Total9 = 0;
    var Total10 = 0;
    var Total11 = 0;
    for (var i = 0; i < col.length; i++) {
        HEADER += "<th>" + col[i].toUpperCase() + "</th>";
        debugger;
    }
    HEADER += "</tr>"
    if (HEADER != null) {
        if (document.getElementById('HEADER') != null) {
            document.getElementById('HEADER').innerHTML = HEADER;
        }
    }
    var html = "";
    for (var i = 0; i < Data.length; i++) {
        debugger;
        html += '<tr role="row" class="even">';
        for (var j = 0; j < col.length; j++) {                                 
            if (ID == '1.0.2') {
                if (RpType == '10') {
                    if (j == '4') {
                        Total1 = Total1 + Data[i][col[j]];
                    }
                    if (j == '5') {
                        Total2 = Total2 + Data[i][col[j]];
                    }
                    if (j == '6') {
                        Total3 = Total3 + Data[i][col[j]];
                    }
                    if (j == '7') {
                        Total4 = Total4 + Data[i][col[j]];
                    }
                    if (j == '8') {
                        Total5 = Total5 + Data[i][col[j]];
                    }
                    if (j == '9') {
                        Total6 = Total6 +...