JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery/jquery.min.js"></script>

<script type="text/javascript">
<!--
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}
//--> 
</script>




<script type="text/javascript">
<!--
 
//initial checkCount of zero 
var checkCount=0

//maximum number of allowed checked boxes 
var maxChecks=8

function setChecks(obj){ 
//increment/decrement checkCount 
if(obj.checked){ 
checkCount=checkCount+1 
}else{ 
checkCount=checkCount-1 
}

//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert 
if (checkCount>maxChecks){ 
obj.checked=false 
checkCount=checkCount-1 
alert('you may only choose up to '+maxChecks+' options') ;
    $('input[name=checkbox]:not(:checked)').attr('disabled','disabled');
}

}

//--> 
</script>



<script type="text/javascript"> 
<!--

$(document).ready(function(){
  
    var array = [];


    $("input[type=button]").click(function(){
    for (var i = 0; i < array.length; i++){  
    if (array[i] == $(this).attr('value')){  
    array.splice(i, 1);  
    }  
    }  
    alert(array.length);
    });



 
    $('input[name="checkbox"]').click(function(){
  
    if ($(this).attr('checked')){
    // Add the new element if checked:  
    array.push($(this).attr('value'));
    }

    else{ 
    // Remove the element if unchecked:  
    for (var i = 0; i < array.length; i++){  
    if (array[i] == $(this).attr('value')){  
    array.splice(i, 1);
    }
    }
    }


    // Clear all labels:  
    $("label").each(function (i, elem){  
    $(elem).html("");
    });

/*
        // Check the array and update labels
    for (var i = 0; i < array.length; i++){
    $("#" +...