Javascript is using wrong textboxes

Question

I am trying to calculate in Javascript. When I execute my calculation I can see that the script is using the textboxes multiple times.

For example:

The calculation for the first row is:

100 + 20 = 120

The calculation for the second row is:

100 + 0 = 100

The total should be 220 .

When I execute the code I get a total of 240 .

Does someone know why my script is not calculating properly?

JSFiddle: http://jsfiddle.net/pjybzg3t/

Here is my code:

 $(document).on('change', '[id^=neg_pos]', function selectQuantity(selectedValue) { let neg = 0 let pos = 0 $('[id^=neg_pos]').each(function(i, e) { var quantity = e.options[e.selectedIndex].value; if (quantity === '0') { } else if (quantity === '1') { var num1 = Number(document.getElementsByName('price[]')[0].value); var num2 = Number(document.getElementsByName('tax[]')[0].value); var tv1 = num1 + num2; pos += tv1; } else { var num3 = Number(document.getElementsByName('price[]')[0].value); var num4 = Number(document.getElementsByName('tax[]')[0].value); var tv5 = num3 + num4; neg += tv5; } document.getElementById('positive').value = pos.toFixed(2); document.getElementById('negative').value = neg.toFixed(2); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="price[]" id="price1" onkeypress="return isNumber(event, this)" data-srno="1"> <input type="text" name="tax[]" id="tax1" onkeypress="return isNumber(event, this)" data-srno="1"> <select id="neg_pos1" name="neg_pos[]" data-srno="1" class="form-control"> <option value="0"></option> <option value="1">+</option> <option value="2">-</option> </select> <br /><br /> <input type="text" name="price[]" id="price2" onkeypress="return isNumber(event, this)" data-srno="2"> <input type="text" name="tax[]" id="tax2" onkeypress="return isNumber(event, this)" data-srno="2"> <select id="neg_pos2" name="neg_pos[]" data-srno="2" class="form-control"> <option value="0"></option> <option value="1">+</option> <option value="2">-</option> </select> <br /><br /> <input type="text" name="price[]" id="price3" onkeypress="return isNumber(event, this)" data-srno="3"> <input type="text" name="tax[]" id="tax3" onkeypress="return isNumber(event, this)" data-srno="3"> <select id="neg_pos3" name="neg_pos[]" data-srno="3" class="form-control"> <option value="0"></option> <option value="1">+</option> <option value="2">-</option> </select> <br /><br /><br /> <input type="text" name="positive" id="positive" onkeypress="return isNumber(event, this)"> <input type="text" name="negative" id="negative" onkeypress="return isNumber(event, this)"> 

Answer 1

The problem is that your are using document.getElementsByName('price[]')[0].value to get the value of the input. But that code specifically selects the first price[] element, so you are always using the same value.

You need to replace [0] with [i] since i corresponds to the relevant [id^=neg_pos] item ( from $('[id^=neg_pos]').each( function( i, e) { ).

updated demo at http://jsfiddle.net/pjybzg3t/1/