Can't get values for multiple checkboxes in html

Question

I have a html table of all the items in in my sql table. Each item has a checkbox that, when selected, is supposed to give the value of the item name to the calculate route when I press the submit button. However, the submit button only submits one checkbox value even if multiple checkboxes are selected. How do I get it to submit the values of all the checkboxes that are selected, not just one checkbox.

<table style="width:100%" class="styled-table">
                <tr>
                <th>Selected</th>
                <th>Amount</th>
                <th>Name</th>
                <th>Typical values</th>
                <th>Unit of typical values</th>
                <th>Calories</th>
                <th>Carbs</th>
                <th>Fat</th>
                <th>Protein</th>
                <th>Salt</th>  
                <th>Sugar</th>
                </tr>

        <tr>
        <% availableFood.forEach(function(food_item){ %>
                <form method="POST" action="/topic7/mid-term/calculate"> 
                        <td><input type="checkbox" name="checkbox[]" value= <%= food_item.name %>></td>    
                        <td><input id="qty" type="text" name="qty" value="1" width="8" style="width: 30px;"/></td>
                        <td><%= food_item.name %></td>
                        <td><%= food_item.typical_values %></td> 
                        <td><%= food_item.unit_of_the_typical_value %></td>
                        <td><%= food_item.calories %></td>
                        <td><%= food_item.carbs %></td>
                        <td><%= food_item.fat %></td>
                        <td><%= food_item.protein %></td> 
                        <td><%= food_item.salt %></td> 
                        <td><%= food_item.sugar %></td>
        </tr>
                        <input type="submit" value="Calculate sum" />
        </form>
<% }) %>

Answer 1

The problem is with your forEach loop content as it creates and closes your form tag with each iteration making multiple forms having only one checkbox. To confirm check your source code in browser by pressing Ctrl+U

Try putting your form tags outside the forEach loop and putting tr tags insdie forEach loop, like this

<table style="width:100%" class="styled-table">
            <tr>
            <th>Selected</th>
            <th>Amount</th>
            <th>Name</th>
            <th>Typical values</th>
            <th>Unit of typical values</th>
            <th>Calories</th>
            <th>Carbs</th>
            <th>Fat</th>
            <th>Protein</th>
            <th>Salt</th>  
            <th>Sugar</th>
            </tr>

    <form method="POST" action="/topic7/mid-term/calculate"> 
    <% availableFood.forEach(function(food_item){ %>
    <tr>
                    <td><input type="checkbox" name="checkbox[]" value= <%= food_item.name %>></td>    
                    <td><input id="qty" type="text" name="qty" value="1" width="8" style="width: 30px;"/></td>
                    <td><%= food_item.name %></td>
                    <td><%= food_item.typical_values %></td> 
                    <td><%= food_item.unit_of_the_typical_value %></td>
                    <td><%= food_item.calories %></td>
                    <td><%= food_item.carbs %></td>
                    <td><%= food_item.fat %></td>
                    <td><%= food_item.protein %></td> 
                    <td><%= food_item.salt %></td> 
                    <td><%= food_item.sugar %></td>
    </tr>
    <% }) %>
                        <input type="submit" value="Calculate sum" />
        </form>
</table>