JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   


    <title>Reject Report Tool</title>

    <link rel="stylesheet" type="text/css" href="DataTables/datatables.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-ui-timepicker-addon.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.css"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.bootstrap.min.css">

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript"...

CSS

<style>
        table	{width: 95%; border: 1px solid black; border-collapse: collapse;}
        th	{border: 1px solid black; border-collapse: collapse;}
        tr	{border: 1px solid black; border-collapse: collapse;}
        td 	{border: 1px solid black; border-collapse: collapse;}
        h1  {color: blue;}
        p   {color: red;}

        .container {
            padding-bottom: 70px;
            max-width: 970px !important; }

        .dataTables_empty {
            display:none; }

        table.dataTable.display thead tr  {
            background-color: #7091ad; }

        table.dataTable.display tfoot {
            background-color: #eeeeee;
            border: none; }

        table.dataTable.display tfoot tr th {
            border: none; }

        table.dataTable.display tfoot tr th {
            border: none; }

        table.dataTable.display tfoot tr {
            border: none; }

        table.dataTable.display tfoot tr input{
            border: none;
            width: 100%; 	}


        div#orderCounts a { padding:15px; font-weight:bold; float:left; }
        div#orderCounts a:link { color:#d0d0d0; }
        div#orderCounts a:visited { color:#c0c0c0;}
        div#orderCounts a:hover { color:#FF00FF; }
        div#orderCounts a:active { color:#f0f0f0;}

        /* STYLES for pop-up box for research notes*/
        div#pop-up {
            display: none;
            position: absolute;
            width: 300px;
            padding: 30px;
            background: #eeeeee;
            color: #000000;
            border: 1px solid #1a1a1a;
            font-size: 90%;
            word-wrap: break-word;	}

        body {
            background-color: #eeeeee;
            overflow-x: scroll;
        }

    </style>

JavaScript

$(document).ready(function(){
        $('#Edit').prop('disabled', true);


        $(document).ready(function(){


        var researchedCounts = 0;
        var unResearchedCounts = 0;
        var table = $('#orderTable').DataTable( {
            select: {
                style: 'multi'
            },
            "scrollY": 400,
            "scrollX": true,
            "bScrollCollapse" : true,
            "columns": [
                {class: 'dt_orderNo'},
                {class: 'dt_orderLineNo'},
                {class: 'dt_upc'},
                {class: 'dt_sku'},
                {class: 'dt_itemDesc'},
                {class: 'dt_size'},
                {class: 'dt_color'},
                {class: 'dt_dept'},
                {class: 'dt_vpn'},
                {class: 'dt_orderType'},
                {class: 'dt_orderPrice'},
                {class: 'dt_supplierName'},
                {class: 'dt_employeeNo'},
                {class: 'dt_rejectReason'},
                {class: 'dt_orderCreateDate'},
                {class: 'dt_rejectedDate'},
                {class: 'dt_storeNo'},
                {class: 'dt_itemStatus'},
                {class: 'dt_moveAvlStatus', "orderDataType": "dom-checkbox" },
                {class: 'dt_researchOutcome', "orderDataType": "dom-select" },
                {class: 'dt_researchNotes'},
                {class: 'dt_avlQty'},
                {class: 'dt_getSOH'},
                {class: 'dt_save'}
            ],
            "order": [[ 11, "desc" ]],
            "iDisplayLength": 100,

            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'copy',
                    exportOptions: {
                        columns: ':visible',
                        format: {
                            columns: ':visible',
                            body: function (data, row, col, node) {
                                var elementType = node.firstChild;
                                if...