JSFiddle - React, Tailwind, and code Playground

HTML

<table id ="unidentified" class="dataTable">
			<thead>
				<tr>
					<th style="header" id="campus">Campus</th>
					<th style="header" id="bankAccount">Bank Account ##</th>
					<th style="header" id="type">Type</th>
					<th style="header" id="payor">Payor</th>
					<th style="header" id="bankDate">Bank Date</th>
					<th style="header" id="totalAmount">Amount</th>
					<th style="header" id="unidentifiedAmount">Unidentified Amount</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>UIC</td>
					<td>bankAccount</td>
					<td>type</td>
					<td>payor</td>
					<td>bankDate</td>
					<td>totalAmount</td>
					<td>unidentifiedAmount</td>
				</tr>
				<tr>
					<td>UIUC</td>
					<td>bankAccount</td>
					<td>type</td>
					<td>payor</td>
					<td>bankDate</td>
					<td>totalAmount</td>
					<td>unidentifiedAmount</td>
				</tr>
			</tbody>
			<tfoot>
							<tr>
					<th>UIUC</th>
					<th>bankAccount</th>
					<th>type</th>
					<th>payor</th>
					<th>bankDate</th>
					<th>totalAmount</th>
					<th>unidentifiedAmount</th>
				</tr>
			</tfoot>
		</table>

CSS

#error{
 color: red;   
}

JavaScript

$('##unidentified tfoot th').each( function () {
        var title = $('#unidentified thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
			var table=$('##unidentified').dataTable();
			
				/*var table=$('#unidentified').dataTable( {
					 "sDom": '<"alignleft"f><"alignright"l>t<"clearboth"><"clearboth"><"bottom"ip>',
					"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
					"iDisplayLength": 25,
					"bLengthChange": true,
					"bFilter": true,
					"bSort": true,
					"sPaginationType": "full_numbers",
					"aaSorting": [[0,'asc'],[1,'asc']],
					"asStripeClasses": [null],
					 "oLanguage": {
			            "sZeroRecords": "There are no records that match your search criterion",
			            "sLengthMenu": "Display _MENU_ records per page",
			            "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
			            "sInfoEmpty": "Showing 0 to 0 of 0 records",
			            "sInfoFiltered": "(filtered from _MAX_ total records)"
     			   		}, 
					} );*/
					
 // Apply the filter
    $("#unidentified tfoot input").on( 'keyup change',function() {
        table
            .column( $(this).parent().index())
            .search( this.value )
            .draw();
    } );
					
					});