How do I increase and decrease the addition in a span tag by click + and – buttons around input tag?

It’s worked without buttons.
But how to apply input addition with help of + and – buttons.
How can I solve this with javascript or jquery?

// addition of three input in span Tag 
        $("input[type=number]").change(function() {
            var val = 0;
            //loop through each inputs
            $("input[type=number]").each(function() {
                    //sum values
                    val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
                })
                //put in a span
            $(".total-select").text(val);
        });

        function inputNumber(el) {

            var myElements = document.getElementsByClassName('numbers');
            var sum = 0;
            for (var i = 0; i < myElements.length; i++) {
                if (myElements[i].value)
                    sum = sum + parseInt(myElements[i].value);
            }

            if (sum <= 8) {
                el.dataset.prevvalue = el.value;

            } else {
                el.value = el.dataset.prevvalue;
            }

        }


        function minusoperation(inputNumber) {
            var el = document.getElementById('number' + inputNumber);
            if (parseInt(el.value)) {
                el.value = parseInt(el.value) - 1;

            } else {
                el.value = 0;
            }
            el.onchange();
        }

        function plusoperation(inputNumber) {
            var el = document.getElementById('number' + inputNumber);

            if (parseInt(el.value)) {
                el.value = parseInt(el.value) + 1;
            } else {
                el.value = 1;
            }
            el.onchange();

        }

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


<span class="total-select" name="4">0</span> <br>
    <button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>

<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>

How to get an answer at runtime by clicking the buttons around them. I also have a separate code for the increase and decrease buttons.

Answer

This is what I actually want. The sum of three input displayed in the span tag.

        // addition of three input in span Tag 
        // $("input[type=number]").change(function() {
        //     var val = 0;
        //     //loop through each inputs
        //     $("input[type=number]").each(function() {
        //             //sum values
        //             val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
        //         })
        //         //put in span
        //     $(".total-select").text(val);
        // });

        function inputNumber(el) {


            var myElements = document.getElementsByClassName('numbers');
            var sum = 0;
            for (var i = 0; i < myElements.length; i++) {
                if (myElements[i].value)
                    sum = sum + parseInt(myElements[i].value);

            }

            if (sum <= 8) {
                el.dataset.prevvalue = el.value;
                //add ID of SPAn tag for getting the addtion of total inputs 
                document.getElementById("total").innerHTML = sum;

            } else {
                el.value = el.dataset.prevvalue;

            }


        }



        function minusoperation(inputNumber) {
            var el = document.getElementById('number' + inputNumber);
            if (parseInt(el.value)) {
                el.value = parseInt(el.value) - 1;

            } else {
                el.value = 0;
            }
            el.onchange();
        }

        function plusoperation(inputNumber) {
            var el = document.getElementById('number' + inputNumber);

            if (parseInt(el.value)) {
                el.value = parseInt(el.value) + 1;
            } else {
                el.value = 1;
            }
            el.onchange();

        }

    <span class="total-select" name="4" id="total">0</span> <br>
    <button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
    <input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
    <button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>

    <button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
    <input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
    <button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button><br>

    <button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
    <input type="number" class="numbers" id="number3" name="3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
    <button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>