在Form中使用相同的隐藏名称属性

I am developing a eCommerce application, where I am displaying all the products. I am passing the price as a input hidden attribute.

<input type="hidden" name="retail_price_cost"  value="10"/>
<input type="hidden" name="wholesale_price_cost"  value="0.30"/>
<input type="submit" class="button subbutton" name="add_to_cart"  value="ADD TO CART" />

However, it is taking the last value from the listed products. I tried converting into an array, by using:

<input type="hidden" name="retail_price_cost[]"  value="10"/>
<input type="hidden" name="wholesale_price_cost[]"  value="0.30"/>
<input type="submit" class="button subbutton" name="add_to_cart[]"  value="ADD TO CART"/>

However, when I click on Add to cart, it is displaying the whole array rather just the form element attribute which is clicked.

Any idea, what could be the issue ?

You have a single form containing all the inputs. When you submit the form, all the inputs will be submitted.

Use a separate form for each product.

You also appear to be trusting the browser to tell you what the prices are. That's highly susceptible to tampering. You would be better of sending a product id and nothing else, and then looking up the prices on the server.

<button type="submit" 
        name="add_to_cart"
        value="your_product_id_12345">
Add to cart
</button>