Loop multiple check boxes in javascript addition

Question

I have a simple checkbox calculator, that pretty much adds the items that are checked. How can I seperate the totalPrice. My issue is that it doesn't display in the right place when food items are selected.

Is there a way to display the price in the right spot according to which items are ticked.. For example items from technology should display in the totalPrice for that fieldset, and items checked from foods should display in the totalPrice for that fieldset. I struggle to make the code as intuitive as possible, any help or tips will be appreciated.

 function priceAddition() { var input = document.getElementsByName("option"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); } } document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2); }

 <form method="post" oninput="priceAddition();"> <div class="grid-container"> <fieldset id="fieldset"> <legend>Prices</legend> <div class="items-container"> <h3>Technology</h3> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="2500"> 4K Television $2500 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="250"> Speakers $250 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="500"> Laptop $500 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="500"> Gaming Console $500 </label> </div> <div class="items-container"> <div class="price"> <br> <h3>Total estimated price for technology: </h3> <p id="totalPrice">$0.00</p> </div> </fieldset> </div> </form> <form method="post" oninput="priceAddition();"> <div class="grid-container"> <fieldset id="fieldset"> <legend>Prices</legend> <div class="items-container"> <h3>Food</h3> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="5"> Grapes $5 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="22"> Salmon Fish $22 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="30"> 12 Donuts $30 </label> </div> <div class="items-container"> <div class="price"> <br> <h3>Total estimated price for food: </h3> <p id="totalPrice">$0.00</p> </div> </fieldset> </div> </form>

Answer 1

Ok, so first of all you've used an id twice, that causess some issues, also you'll need seperate functions for both forms. Here's the new code:

 function priceAddition() { var input = document.getElementsByName("option"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); } } document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2); } function priceAddition2() { var input = document.getElementsByName("option2"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); } } document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2); }

 <form method="post" oninput="priceAddition();"> <div class="grid-container"> <fieldset id="fieldset"> <legend>Prices</legend> <div class="items-container"> <h3>Technology</h3> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="2500"> 4K Television $2500 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="250"> Speakers $250 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="500"> Laptop $500 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option" value="500"> Gaming Console $500 </label> </div> <div class="items-container"> <div class="price"> <br> <h3>Total estimated price for technology: </h3> <p id="totalPrice">$0.00</p> </div> </fieldset> </div> </form> <form method="post" oninput="priceAddition2();"> <div class="grid-container"> <fieldset id="fieldset"> <legend>Prices</legend> <div class="items-container"> <h3>Food</h3> <div class="item-option"> <label class="label"> <input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option2" value="5"> Grapes $5 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option2" value="22"> Salmon Fish $22 </label> </div> <div class="item-option"> <label class="label"> <input type="checkbox" name="option2" value="30"> 12 Donuts $30 </label> </div> <div class="items-container"> <div class="price"> <br> <h3>Total estimated price for food: </h3> <p id="totalPrice2">$0.00</p> </div> </fieldset> </div> </form>