JSFiddle - React, Tailwind, and code Playground

HTML

<body onLoad="clearForms()" onUnload="clearForms()">
    
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
    <form id="form1" name="form1" method="post" action="check_combination.php">
        <table width="200" border="1" align="center">
            <tr>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td>
            </tr>
            <tr>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td>
            </tr>
            <tr>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td>
                <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox"...

JavaScript

function clearForms() {
    var i;
    for (i = 0;
    (i < document.forms.length); i++) {
        document.forms[i].reset();
    }
}

//initial checkCount of zero 
var checkCount = 0;

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

$(document).ready(function() {

    $("#test").click(function() {
        alert($(':checked').length)
    });

    $(':checkbox[name=checkbox]').change(function() {

        //update checkCount 
        checkCount = $(':checked').length;

        if (checkCount >= maxChecks) {
            //alert('you may only choose up to ' + maxChecks + ' options');
            $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
        } else {
            $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
        }

        if (this.checked) {
            $("td.label").append('<label>' + this.value + ' </label>');
        } else {
            $("td.label").find(':contains(' + this.value + ')').remove();
        }

        $('input[name="result"]').val($("td.label").text());

/* 
        I don't know what this code does.
        
        $('input[name="numbers"]').show(function() {
            $(this).val("");
            for (var i = 0; i < array.length; i++) {
                if (i <= 7) {
                    $(this).val($(this).val() + " " + array[i]);
                }
            }
        });
        */
    });

    $('#button2').click(function() {
        alert($('input[name="result"]').val());
    });

});