JSFiddle - React, Tailwind, and code Playground

by Daniel_S_EGT

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css">
<table id="studentAtt" class="display" cellspacing="0" style="width:100%;">
        <thead>
            <tr>
				<th>Texas Unique ID</th>
                <th>Local ID</th>
				<th>Last</th>
                <th>First</th>
				<th></th>
            </tr>
        </thead>
        <tbody>

</tbody>
</table>

JavaScript

$(document).ready(function() {
	
  data = [
    ['1234', '4321', 'Test1', 'User','1'],
    ['12345', '54321', 'Test2', 'User','0'],
     ['123456', '654321', 'Test3','User','1']
  ]
	
	/***** Pre-Algebra Arrays ***/
	var removeChecksPreAE = [];
	var saveChecksPreAE = [];
	var saveChecksPreAEOG = []; // Used to store the original loaded IDs from database on form load.
  
// Setup Data Table
  var t = $('#studentAtt').DataTable(
		{
			
			"data":data,
			/*'columns': [
    		{
            render: function ( data, type, row ) {
          
				var checkbox = $('<input/>',{
                		'type': 'checkbox',
						'class':'editor-completed'
					 });
                return data;
            },
            className: "dt-body-center"
        	}],*/
			 rowCallback: function ( row, data ) {
				
			if (data[4] == 1){
				$('td:nth-child(5) input', row).attr('checked','checked');
				saveChecksPreAEOG.push(data[0]);
			}
				 
        },
			'columnDefs': [
				 {
					'targets': 4,
					'checkboxes': {
					   'selectRow': false
					}
				 }
			  ],
			  'select': {
				 'style': 'multi'
			  },
			  'order': []

		});
    
    /******** Pre-Algebra Enrolled, select all checkbox on first row, header **************/
$('th:nth-child(5) input').on('click', function(){

		if ($(this).is(':checked')){
			$('td:nth-child(5) input').attr('checked','checked');
			
			// Store all checkboxes checked into array
			$('tr td:nth-child(5) input').each(function() {
				var currentRowPreEA=$(this).closest('tr');
				var col0PreEA=currentRowPreEA.find('td:eq(0)').html();
						$('td:nth-child(5) input',currentRowPreEA).attr('checked','checked');
						saveChecksPreAE.push(col0PreEA);
						
			});
	
		}
		else
		{
			saveChecksPreAE = [];
			$('td:nth-child(5) input').attr('checked',false);
			$('tr td:nth-child(5) input').each(function(){
			

				var rowPAE = $(this).closest('tr');
				var preAlgETXID = rowPAE.find('td:eq(0)').html();
		
				$.each(saveChecksPreAEOG, function...