Why is my table behaving this way?
<p>I have a table the represents all the product in the cart of customer that has a "remove from cart" button. It enables the user to remove a certain product in the cart. Here is the code: </p>

<pre><code>&lt;form
        action="${pageContext.request.contextPath}/customer/removeProduct"
        method="post"&gt;
        &lt;input type="hidden" name="page" value="${page}"&gt;
        &lt;table class="table"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Quantity&lt;/th&gt;
                    &lt;th&gt;Amount&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;c:forEach items="${productsInCart}" var="product"
                    varStatus="status"&gt;
                    &lt;input type="hidden" class="form-control" name="upc"
                            value="${product.getProduct().getUpc()}"&gt;
                    &lt;tr class="warning"&gt;

                        &lt;td&gt;${product.getProduct().getName()}&lt;/td&gt;
                        &lt;td&gt;${product.getQuantity()}&lt;/td&gt;
                        &lt;td style="color: green;"&gt;&amp;#8369; ${product.totalPrice()}&lt;/td&gt;
                        &lt;td&gt;&lt;input type="submit" class="btn btn-warning btn-xs"
                            value="Remove from cart"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/c:forEach&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/form&gt;
</code></pre>

<p>A product is removed by sending its UPC (Universal Product Code) in the controller. However, when the button "remove from cart" button is clicked, the UPCs of all the products in the cart are sent. I don't know why this happens.</p>