Javascript/jQuery getting total sum from multiple inputs using on change

Question

I need to sum a total of all values from a group of inputs. Yes I have done some research on Stack and tried implementing some of them. So far to note some of the answers in this post ( How get total sum from input box values using Javascript? ) came the closest, but my total is miscalculating and I am not sure where my error is. I have tried multiple ways and I DO have a JSFiddle set up.

I use external elements to increment and decrement the input values. I trigger the on change. I am consoling out my total, and the total on the first increment gets the correct number "1", but any subsequent ones it updates the total by a series of 4 then more. Even then decrementing it is just incrementing the value.

The JSFiddle is here

https://jsfiddle.net/a6vnpgwL/3/

HTML

<ul class="QuantityList">
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
 <span class="plus IncDecButton">+</span>
 <span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
</ul>

JS

var totalCount = 0;

$(".IncDecButton").click(function (event)
{

    event.preventDefault();
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var newVal = oldValue;
    
    
    
    //Hide .decButton for oldValue
    if (newVal == 0 || oldValue == 0)
    {
        $button.parent().find(".minus").hide();
        oldValue = 0
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    if ($button.text() == "+")
    {
        var newVal = parseFloat(oldValue) + 1;
        //totalCount += parseInt($(this).parent().find('input').val(), 10);
    }
    else
    {
        // Don't allow decrementing below zero
        if (oldValue >= 1)
        {
            var newVal = parseFloat(oldValue) - 1;
          //  totalCount -= parseInt($(this).parent().find('input').val(), 10);
        }
    }
    //Hide .decButton for newVal
    if (newVal == 0)
    {
        $button.parent().find(".minus").hide();
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    //added to stop at a max quantity - 2-6-2020 - CM
    if(newVal == $button.parent().find("input").attr("max")){
         $button.parent().find(".plus").hide();
    }else{
        $button.parent().find(".plus").show();
    }
    
    $button.parent().find("input").val(newVal);


$button.parent().find('input').each(function() {
        $(this).on("change", function(){
            calculateSum();
        });
    });

$button.parent().find('input').change();




}); //End button click


function calculateSum($elem){
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

Any help is much appreciated.

Answer 1

You need to reset totalCount each time.

As a tip, anytime your output get progressively larger over time, the first thing to look for is a failure to reset a total within whatever method is used to add inputs.

function calculateSum($elem){
totalCount=0;
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

Answer 2

Just reset totalCount each time you run the calculate function

totalCount=0;
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});