Loop Through Formset To Sum Values - JQuery

Question

I have a Django Form Set where each form has an amount with class = amount2. Each time a change is made to any one of these inputs with that class I would like to re-total the value of all inputs with class amount2. Currently I am trying this

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += $(this).val();
    console.log(sum)
  })
})

when I log sum I get 0 despite the fact that I am entering 5 in the input. So I tried to dial it back a bit and do this

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += 10;
    console.log(sum)
  })
})

That log returns prints the number 10 as I would expect when I make one input and 20 on the next.

So what is going wrong with my first bit?

UPDATED

  {% for form in formset.forms %}
                <table id = 'manifest-table25' class="manifest-table2" width=100%>
                  {% csrf_token %}
                  <tbody width=100%>
                    <tr class="manifest-row">
                      <td width = 17.5% class="productCode" onchange="populateProduct(this)">{{form.ProductCode}}</td>
                      <td width = 32.5% class="description">{{form.DescriptionOfGoods}}</td>
                      <td width = 12.5% class="quantity" oninput="calculateUnit(this)">{{form.UnitQty}}</td>
                      <td width = 12.5% class="unitType">{{form.Type}}</td>
                      <td width = 10.5% class="price" oninput="calculate(this)">{{form.Price}}</td>
                      <td width = 12.5% class="amount2">{{form.Amount}}</td>
                      {% with url_name=request.resolver_match.url_name %}
                      {% if url_name == 'EditQuoteView' %}
                        <td>{{form.DELETE}}</td>

                      {% endif %}
                      {% endwith %}
                      {{form.id}}
                    </tr>
                  </tbody>
                </table>
              {% endfor %}

Answer 1

Input, textarea, select, or contenteditable value is always a String. (Even if the InputElement has the HTML attribute type="number"). Remember to always handle conversion before doing math.

Use parseInt(val, 10), parseFloat(val), Number(val), or BigInt(val) etc. to convert a string to Integer, Float or Number

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  let sum = 0
  $amount2.each(function() {
    sum += Number(this.value);
  });
  $("#amount2-sum").text(sum);
});

<input type="number" class="amount2">
<input type="number" class="amount2">
<div id="amount2-sum"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Additionally for fun you could use jQuery's .get(), JS's .Array.prototype.reduce() and the unary + to coerce a String to Number

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  const sum = $amount2.get().reduce((sum, el) => sum + +el.value, 0);
  $("#amount2-sum").text(sum);
});

<input type="number" class="amount2">
<input type="number" class="amount2">
<div id="amount2-sum"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>