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">
<form>
<table border="1" bordercolor="#5B0001">
	<tr><th colspan="2"><center>APR Totals</center></th></tr>
	<tr><th>Element</th><th>Total Selected</th></tr>
	<tr><td><b>Pre-Algebra Enrolled:</b></td><td><input type="text" name="PreAlgEI" id="PreAlgEI" size="10" readonly="yes"></td></tr>
	</table>
</form>
<br />
<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'],
     ['23456', '65432', 'Test4','User','1'],
     ['3456', '6543', 'Test5','User','0']
  ]
	
	/***** Pre-Algebra Arrays ***/
	var removeChecksPreAE = [];
	var saveChecksPreAE = [];
	var saveChecksPreAEOG = []; // Used to store the original loaded IDs from database on form load.
  
  var preAECount = 0;
  
// 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]);
        preAECount += 1;
			}
				 
        },
			'columnDefs': [
				 {
					'targets': 4,
					'checkboxes': {
					   'selectRow': false
					}
				 }
			  ],
			  'select': {
				 'style': 'multi'
			  },
			  'order': []

		});
    // Set total selected value on form load
     document.getElementById('PreAlgEI').value = preAECount;
    
    /******** Pre-Algebra Enrolled, select all checkbox on first row, header **************/
$('th:nth-child(5) input').on('click', function(){
		preAECount = 0;
		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() {
      preAECount += 1;
				var currentRowPreEA=$(this).closest('tr');
				var col0PreEA=currentRowPreEA.find('td:eq(0)').html();
						$('td:nth-child(5)...