I cannot validate input number separately

Question

I’m working on a project, basically an online menu that transfers the order data by Whatsapp.

I cloned a input number to capture the amount of orders and multiply by the selected order via checkbox. I managed to do that. The problem is that he always takes the sum of the last input number and makes the calculation.

I would like him to do the calculation separately, and in the end add up to the total of the request. I have already run the entire internet behind this solution and could not apply in the project. Any help will be more than welcome! Note: I am studying Javascript for a short time, so I’m having this difficulty.

//validação do input number
        
    numero = 0;

   function less() {
     numero--;
     setValue(numero);
   }

   
   function more() {
     numero++;
     setValue(numero);
   }

   
   function setValue(value) {
     document.getElementById('num').value = value;
     
   }
   
   setValue(numero);


//formulario de envio

$(document).ready(function(){
 $("#enviar").click(function(){
 
// Pedido Selecionado
        
        var pedido = "" 
        const pedidosDisponiveis = document.querySelectorAll("input[type=checkbox]")
        var pedidoSelecionado = ""
        for ( pedido of pedidosDisponiveis) {
            var pedidoSelecionados = pedido.checked
            
            if(pedido.checked == true) {
                pedidoSelecionado +=` ${pedido.id} -> ${pedido.value} Reais; ` 
                var pedidosValores  =  parseInt(pedido.value)
            }
        }

 //quantidade selecionada
        
 var quantidade = ""
 const quantidadeDisponivel = document.querySelectorAll("input[type=number]")
        var quantidadeSelecionada = ""

        for ( quantidade of quantidadeDisponivel) {

            if(quantidade.value){
                quantidadeSelecionada +=`${quantidade.alt} ${quantidade.id} -> ${quantidade.value} `
                var quantidadeValor = parseInt(quantidade.value)
                var qtdped = 0;
                qtdped += pedidosValores * quantidadeValor

                
            }

        }
        
  


//impressão no whatsapp

var texto=`Nome: ${nome};Endereço: ${endereco}; N°: ${numero}; Região: ${bairro};  Obs: ${observacao}; 
    // Forma de Pagamento: ${formaSelecionada}, Pedido: ${pedidoSelecionado}, ${adicionalSelecionado}, ${quantidadeSelecionada},
    Valor do Pedido = ${qtdped},00
    ;Taxa de entrega = ${TaxaDeEntrega},00
    ;Desconto = ${desconto},00 
    ;Valor Total: ${qtdped + TaxaDeEntrega - desconto},00`
    var site="https://&text="+texto.replace(" ","%20","%0a")
    
    if(confirm("Confirma seu pedido?")){
        window.location.href=site;
    } else {
    }
})
})

<div class="item-info item-info-1">

    <div class="item-img">
        <img src="img/lanches/pizza.jpg" alt="Pizza">
    </div>

    <div class="item-txt">
        <strong>Pizza</strong>
        <span class="item-sub-txt"> Molho, mussarela, calabresa, cebola fatiada e orégano</span>
    </div>

    <div class="item-numeros-container">
        <div class="item_valor">
            <div>R$ 7,00</div>
        </div>

        <div class="item_quant">

            <div>
                <input type="checkbox" value="7,00" name="item-checkbox" class="item-checkbox"
                    id="Pizza">
            </div>

        </div>

        <div class="item_add">
            <i class="fas fa-plus btnAdd1"></i>
        </div>

    </div>

    <div id="adicionais1" class="adicionais hidden">
        <div class="itens-adicionais">
            <strong>Adicionais</strong>

            <div class="contcont">
                <div class="row">
                    <div class="col-md-12">
                    <button type="button" id="menos" onclick="less()"><i class="fa fa-minus-circle"aria-hidden="true">-</i></button> &nbsp; <input type="number" name="numero" id="num"> &nbsp; <button type="button" id="mais" onclick="more()">+<i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                    </div>
                </div>
                </div>

Answer 1

One way to do it would be like this:

<input type="checkbox" name="acr[0]" data-id="1" data-valor="2.00" value="Queijo" /><label>Queijo - R$ 2,00</label>
<input type="number" name="quantidade_acr[0]" step="1" value="1" min='1' max="5" /><br/>

<input type="checkbox" data-id="2" data-valor="0.50" name="acr[1]" value="Alho" /><label>Alho - R$ 0,50</label>
<input type="number" name="quantidade_acr[1]" step="1" value="1" min="1" max="5" /><br/>

<input type="checkbox" data-id="3" data-valor="0.50" name="acr[2]" value="Oregano" /><label>Orégano - R$ 0,50</label>
<input type="number" name="quantidade_acr[2]" step="1" value="1" min="1" max="5" /><br/>

<button id="salvar">Salvar</button>
<br>
<div id="dados"></div>
<div id="subtotal"></div>

Javascript:

$(document).ready(function(){
    $('#salvar').on('click', function() {
        var list = [], subtotal= 0;
         $('[name*="acr"]:checked').each(function(key) {
          
             var qtde = $('[name*="quantidade_acr['+key+']"]').val();
             var produto = $(this).val();
             var id = $(this).data('id');
             var valor = $(this).data('valor');
             var total = qtde * valor;
            list[key] = {
                          produto: produto,
                          quantidade: qtde ,
                          id: id,
                          valor: valor,
                          total_valor: total
                         };
              subtotal+=parseFloat(valor);           
                 
           });
        if(list.length > 0) {
          $('#dados').html('<br><strong>'+list.length+'</strong> produto(s) selecionado(s):<br><pre>'+JSON.stringify(list, null, '   ') + '</pre>');
           $('#subtotal').html('<b> Subtotal '+subtotal+'</b>');
        } else {
        $('#dados').html('<br>Selecione algum produto.');
        }
    
    });
});

See in the example the jsfiddle.