JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" >

<table align=center>
<tr>
<td><input type="checkbox" name="ingredients" value="sausage" /> Italian Sausage<br /></td>
<td><input type="checkbox" name="ingredients" value="mushrooms" /> Fresh Mushrooms<br /></td>
<td><input type="checkbox" name="ingredients" value="pepperoni" /> Pepperoni<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="onions" /> Fresh Onions<br /></td>
<td><input type="checkbox" name="ingredients" value="ham" /> Diced Ham<br /></td>
<td><input type="checkbox" name="ingredients" value="peppers" /> Fresh Green Peppers<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="beef" /> Beef<br /></td>
<td><input type="checkbox" name="ingredients" value="tomatoes" /> Diced Tomatoes<br /></td>
<td><input type="checkbox" name="ingredients" value="bacon" /> Bacon Bits<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="green" /> Green Olives<br /></td>
<td><input type="checkbox" name="ingredients" value="olives" /> Ripe Olives<br /></td>
</tr>
</table>
<br />
<input type="button" name="submit" value="Submit" onclick="anyCheck();"  />
</form>

CSS

body {background-color:Gray;}
body {text-align:left;}
p {text-align:center}

JavaScript

function anyCheck() {
            var form = document.getElementById("form1"),
                inputs = form.getElementsByTagName("input"),
                i,
                total = 0;
            
            for (i = 0; i < inputs.length; i++) {
                if (inputs[i].type.toLowerCase() === "checkbox" && inputs[i].checked)
                    total++;
            }
            alert("You selected " + total + " boxes.");
        }