JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<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>

CSS

.QuantityList{}
.QuantityList li{list-style:none; border:1px solid #ddd; width:100%;}
.QuantityList input{width:20%; display:inline}

.plus,.minus{font-size:18px; font-weight:bold; display:inline-block; color:black; background-color:green; padding:10px; width:20px; height:20px;text-align:center; color:white;}

JavaScript

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(),...