JSFiddle - React, Tailwind, and code Playground

HTML

<div  align="left" id="sessiontable-${clickCount}" style="padding-left: 10px;padding-top: 20px; padding-bottom:15px" > 
				<table id="researchTable-${clickCount}" border="2" class="fixedWidthSessionTbl">
                    <thead>
				 
				 <th id="allheader-${clickCount}" style="font-size: 13px;">+ALL</th>
				 <th style="font-size: 13px;">Time</th>
				 <th style="font-size: 13px;">Status</th>
				 <th style="font-size: 13px;">XAID</th>
				 <th style="font-size: 13px;">UserName</th>
				 <th style="font-size: 13px;">DeviceId</th>
				 <th style="font-size: 13px;">PC Print</th>
				 <th style="font-size: 13px;">TDL</th>
				 <th style="font-size: 13px;">IpAddress</th>
				 <th style="font-size: 13px;">ISP</th>
				 <th style="font-size: 13px;">Country</th>
				 <th style="font-size: 13px;">State</th>
				 <th style="font-size: 13px;">City</th>
				 <th style="font-size: 13px;">Alert</th>
				 <th style="font-size: 13px;">UserAgent</th>
				 <th class="events" style="display: none;" style="font-size: 13px;">AdditonalInfo</th>
				 <th class="events" style="display: none;" style="font-size: 13px;">Events</th>
				 
				 </thead>
                    
                     <tbody>
				 <g:each in="${sessionList}" var="info" status="i">
							<tr>
								<td ><span  class='glyphicon glyphicon-plus sample${clickCount}'  ></span>
								<button id="sessionAdtlInfoPopOverButn-${clickCount}" class="btn btn-default addtnlInfo" type="button" 
		                            	data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" style="margin-left:15px">
		                                <span class="glyphicon glyphicon-tasks" ></span>
		                            </button></td>
								<td style="font-size: 13px;">${info?.SessionDate}</td>		
								<td style="font-size: 13px;">${info?.Status}</td>
								<td style="font-size: 13px;">${info?.XaCustId}</td>
								<td style="font-size: 13px;">${info?.UserName}</td>
								<td...

JavaScript

//clickcount refers to tabIndex
var clickCount =1;
$("#researchTable-"+clickCount).dataTable({
		"bAutoWidth" : false,
		"bInfo" : true,
		"bSearch" : false,
		"bProcessing" : true,
		"bSortable": true,
		"aaSorting": [[1,'desc']],
		//"bStateSave": true,
		"bLengthChange" : false,
		//"sScrollX": "100%",   
		//"sScrollXInner": "100%",
		 "scrollY":"200px",		
		// "lengthMenu": [3, "All"],
		 "iDisplayLength": 30,
		 "sPaginationType":"four_button",
		"bPaginate":true,
		"bFilter" : true,
		"oLanguage": {
	          "sEmptyTable":"No sessions found"
	   },

	    "aoColumns":[
	                {
	                    "mDataProp":null,"sWidth": "8%",
	                    "sDefaultContent": '<span class="glyphicon glyphicon-plus" ></span><button id="sessionAdtlInfoPopOverButn-'+clickCount+'" class="btn btn-default addtnlInfo" type="button" '+
                    	'data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover"> <span class="glyphicon glyphicon-tasks" style="align:right;"></span> </button>'
	                },
	                {"mData":"SessionDate","bVisible": true,"sWidth": "15%",sDefaultContent: ""},
	                {"mData":"Status","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	                {"mData":"XaCustId","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	                {"mData":"UserId","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	                {"mData":"DeviceId","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	                {"mData":"PcPrint","bVisible": true,"sWidth": "30%",sDefaultContent: ""},
	                {"mData":"TdlZone","bVisible": true,"sWidth": "5%",sDefaultContent: ""},
	                {"mData":"IpAddress","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	                {"mData":"IspName","bVisible": true,"sWidth": "10%",sDefaultContent: "xy"},
	                {"mData":"Country","bVisible": true,"sWidth": "8%",sDefaultContent: ""},
	               ...