JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<div class="container" id="TableContainer1">

</div>

<div class="container" id="TableContainer2">

</div>

<div class="container" id="TableContainer3">

</div>

JavaScript

function loadWoSteps(bId, woId) {
  alert(`${bId} is the batch ID and ${woId} is the work order ID`)
}


let data2 = //hardcoded for testing purposes not real looking data
        [
            { wostatus: '1', wolat: 50, wolong: -91, woid: '1', custname: 'test bob',
            fieldname: 'test field 40', unitsacre: '12345', bchid: 1 }, 
            { wostatus: '2', wolat: 44, wolong: -94, woid: '2', custname: 'test john',
            fieldname: 'test field 55', unitsacre: '5431', bchid: 1 },
            { wostatus: '3', wolat: 44, wolong: -94, woid: '3', custname: 'test carl',
            fieldname: 'test field 78', unitsacre: '581', bchid: 1 },
            { wostatus: '4', wolat: 44, wolong: -94, woid: '4', custname: 'test marty',
            fieldname: 'test field 32', unitsacre: '87621', bchid: 2 },
            { wostatus: '5', wolat: 44, wolong: -94, woid: '5', custname: 'test susan',
            fieldname: 'test field 46', unitsacre: '53121', bchid: 2 },
            { wostatus: '6', wolat: 44, wolong: -94, woid: '6', custname: 'test abby',
            fieldname: 'test field 12', unitsacre: '55321', bchid: 3 },
            { wostatus: '4', wolat: 44, wolong: -94, woid: '7', custname: 'test eddy',
            fieldname: 'test field 322', unitsacre: '543', bchid: 3 }
        ];
        
        let currentTable = [] ,
            idBatch = data2[ 0 ].bchid ,
            first = true ,
            jNum = 1 ;
        //const container = document.getElementById( 'TableContainer' ) ;
        currentTable[idBatch] = [];

        for ( var loop = 0; loop < data2.length; loop++ ) {
            currentBR = data2[ loop ] ;

            currentBR.googleString = 
                '<a href="https://maps.google.com?saddr=Current+Location&daddr=' + currentBR.wolat + ',' + currentBR.wolong
            +   'title="Google Directions from Current Location" target="_blank">'
            +   '<img src="https://img.icons8.com/doodle/96/000000/google-maps-new.png" ' 
            + ...