I have created two separate div elements with unique IDs, but they share the same attributes. Below is the structure of the first div:
<div id="espresso-option" class="option">
<div class="container">
<div class="type">
<p>Type</p>
<input type="radio" id="houseEspresso" name="type" checked="checked" onclick="addProduct(this)">
<label for="houseEspresso">House Espresso</label><br>
<input type="radio" id="guestEspresso" name="type" onclick="addProduct(this)">
<label for="guestEspresso">Guest Espresso</label><br>
</div>
<div class="size">
<p>Size</p>
<input type="radio" id="single" name="size" value="25000" onclick="addProduct(this)">
<label for="single">Single Espresso</label><br>
<input type="radio" id="double" name="size" value="50000" checked="checked" onclick="addProduct(this)">
<label for="double">Double Espresso</label><br>
</div>
<div class="extra">
<p>Extras</p>
<input type="radio" id="none" name="extra" value="0" checked="checked" onclick="addProduct(this)">
<label for="milk">None</label><br>
<input type="radio" id="hotmilk" name="extra" value="10000" onclick="addProduct(this)">
<label for="hotmilk">Hot milk</label><br>
<input type="radio" id="coldmilk" name="extra" value="10000" onclick="addProduct(this)">
<label for="coldmilk">Cold milk</label><br>
<input type="checkbox" id="chocolate" name="extra" value="10000" onclick="addProduct(this)">
<label for="chocolate">Chocolate Dusting</label><br>
<input type="checkbox" id="marshmallow" name="extra" value="10000" onclick="addProduct(this)">
<label for="marshmallow">Marshmallows</label><br>
<input type="checkbox" id="cream" name="extra" value="10000" onclick="addProduct(this)">
<label for="cream">Whipped Cream</label><br>
</div>
</div>
<div class="add-to-cart">
<strong class="product-price-title">Price: </strong>
<span class="product-price">0</span>
</div>
<button type="button" class="btn btn-cart">Add product</button>
</div>
Now, let's take a look at the second div element:
<div id="cappuccino-option" class="option">
<!-- Same structure as above without any changes -->
</div>
To calculate the price and add the selected products to the cart using JavaScript, a specific function has been implemented. However, there seems to be an issue when adding more than one product due to the buttons having the same name attribute. Any suggestions on how to resolve this with pure HTML, CSS, and JavaScript would be greatly appreciated. Thank you!