Increase and decrease the amount of the selected element through the class

Question

So in the following part of my code I have a function to increase the amount or decrease of each product of the store(I will leave a photo to explain better), when I press the "+" button it increases the amount and in the "-" decreases, however it only increases in the first element that has the class that I selected even I trying to increase the amount of the last product that appears, for example, if I increase the amount of the product "chocolate blend drops" it increases the amount only of the first product "milk cover". I think because I use querySelector it takes the first selected element, however I want it to select the Current element to which I click.

Quantity code:

<div>
    <div class="produto_qnt_princ" data-app="product.quantity">     
      <input class="qnt_menor_maior" type="button" id="plus" value='-' onclick="process_geral(-1)" />
      <input class="quanti qnt_menor_maior" name="quanti" class="text" size="1" type="text" value="1" maxlength="5" />
      <input class="qnt_menor_maior" type="button" id="minus" value='+' onclick="process_geral(1)" /> 
    </div> 
</div> 

Code of the function that is called:

function process_geral(quant){
    var classValue = parseInt(document.querySelector('.quanti').value);
    classValue+=quant;
    //console.log(classValue); 
    if(classValue < 1){
        document.querySelector("input.quanti").value = 1;
    }else{ 
        document.querySelector("input.quanti").value = classValue;    
    }
}  

Photo to which I referred:

Answer 1

Solution for my answer was the following: I use in my system a template engine aimed at PHP (Twig) and with it I can return the id value of each product (through {{product.id}} )then my solution was to pass as function parameter when it is clicked the quantity to be incremented or decremented and the product id. Ai in my function I do a validation to compare if the value of the id of the selected product is the same id of the product that was passed as parameter, then if it is the same value I save this element and then pass the value of the amount that it should have.

<div data-product="{{ product.id }}">
    <div class="produto_qnt_princ" data-product="{{ product.id }}" data-app="product.quantity">      
      <input class="qnt_menor_maior" type="button" id="plus" value='-' onclick="process_geral(-1,'{{ product.id }}')" />
      <input class="quanti qnt_menor_maior" name="quanti" class="text" size="1" type="text" value="1" maxlength="5" />
      <input class="qnt_menor_maior" type="button" id="minus" value='+' onclick="process_geral(1,'{{ product.id }}')" />
      <p> {{ product.id }} </p>  
    </div>    
</div>     

function process_geral(quant, indice){ 
    const todosProdutos = document.getElementsByClassName('produto_qnt_princ');
    
    // Para filtrar você pode fazer assim:
    /*const produtoFiltrado = todosProdutos.filter(e => e.dataset.indice === indice);
    ou pode usar o for implementado abaixo*/
    var i,len;
    var produtoFiltrado; 

        for (i = 0,len=todosProdutos.length;i<len; i++) {
            //console.log(todosProdutos[i].getAttribute('data-product'));
            if (todosProdutos[i].getAttribute('data-product') === indice) {
                //console.log(todosProdutos[i].getAttribute('data-product'));
                produtoFiltrado = todosProdutos[i];
            }
        }
    
    var classValue = parseInt(produtoFiltrado.querySelector('input.quanti').value);
    classValue+=quant; 

    if(classValue < 1){
        produtoFiltrado.querySelector("input.quanti").value = 1;
    }else{  
        produtoFiltrado.querySelector("input.quanti").value = classValue;     
    } 
}    

Answer 2

Try it like this:

<script>
function process_geral(quant, element){
    var classValue = parseInt(element.parentElement.querySelector('.quanti').value);
    classValue+=quant;
    //console.log(classValue); 
    if(classValue < 1){
        element.parentElement.querySelector("input.quanti").value = 1;
    }else{ 
        element.parentElement.querySelector("input.quanti").value = classValue;    
    }
}  
</script>
<div>
    <div class="produto_qnt_princ" data-app="product.quantity">     
      <input class="qnt_menor_maior" type="button" id="plus" value='-' onclick="process_geral(-1, this)" />
      <input class="quanti qnt_menor_maior" name="quanti" class="text" size="1" type="text" value="1" maxlength="5" />
      <input class="qnt_menor_maior" type="button" id="minus" value='+' onclick="process_geral(1, this)" /> 
    </div> 
</div> 

What was done is basically pass the object reference in the event and use its parent element to find the input with the amount.

There are other more elegant ways to do this, but I believe it should work