JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function deleteSelectedRows(){
    var cks = $("input[name='ck']");
    console.log(cks.length);
    var checked = [];
    // Add ids of checked messages to checked array
    for(i = 0;i<cks.length;i++){
        if(cks[i].checked){
            checked.push(cks[i].parentNode.parentNode.id);
        }
    }
            
		// AJAX delete POST
    var jsonob = JSON.stringify(checked);
    $.post("deletecom.php" , {rows_to_be_deleted:jsonob} , function(data){
        for(i=0;i<checked.length;i++){
        	// hide deleted messages row if delete POST successful
            $("#" + checked[i]).fadeOut('slow' , function(){
            	$(this).remove();
            });
        }
    });
}

function checkUncheckAll(){
  // var chks = all checkboxes
  var chks = document.getElementsByName("ck");
  
  // if select all checkbox is checked
  if(document.getElementById("ck_All").checked) {

    for( i = 0;i < chks.length;i++ ){
      document.getElementsByName("ck")[i].checked = true;
    }
    
  } else {
 
		for(i = 0;i < chks.length;i++){
      document.getElementsByName("ck")[i].checked = false;
		}
	}
};

function selectUnselect(checked){
	if(!checked){
    document.getElementById("ck_All").checked = false;
	} else {
        document.getElementById("delete_link").onclick = function(){
        	deleteSelectedRows();
        };
        var chks = $("input[name='ck']");
        var all_checked = true;
        for(i=0;i<chks.length;i++){
            if(chks[i].checked){
                continue;
            } else {
            	all_checked = false; 
              break;
            }
        }
        if(all_checked){
        	document.getElementById("ck_All").checked = true;
        }
	}
}
$(document).ready(function(){
  $('#delete_link').on('click', function(){
  console.log($('input[name="ck"]:checked').length);
    if($('input[name="ck"]:checked').length === 0){
      alert('Please select an...