How to use a multi-time javascript function for different Ivs and inputs with different classes?

Question

I am creating an Ecommerce site within this site I have Divs with products where I have buttons to change input values but I have to replicate functions in javascript and change Divs class names every time. This is the problem if I have 100 products I will need to replicate 100 times. Is there any way to do this without replicating for each product? I’ll post here the part of the code I need help with.

Part of the Product

    <span>Preço de Produto:</span>
<span class="valor" id="Valor">200</span>€<br>
    <br>
    <input type="image" src="https://liedobom.pt/wp-content/uploads/2018/04/1-5.jpg" alt="" width="100" height="100">
    <br>
        <input id="Menos" type="button" onclick="Menos();Resultado()" value="-">
        <input type="number" name="Qtd" id="Qtd" maxlength="4" value="0" size="4">
        <input id="Mais" type="button" onclick="Mais();Resultado()" value="+"><br><br>
        <span>Total</span><br>
        <div class="Ajudante">
            <input type="number" name="" id="PPTTL" value="0" readonly><br><br>
        </div>
<input type="button" onclick="Exibir()" value="Add Carrinho"><br><br>
<input type="button" value="Comprar">

Javascript

//Produto 1///
function Menos(){
    var Qtd = document.getElementById("Qtd").value;
            document.getElementById("Qtd").value = Qtd - 1;
            if(document.getElementById("Qtd").value <= 0){
                document.getElementById("Qtd").value = 0;
            }
    }

    function Mais(){
        var Qtd = document.getElementById("Qtd").value;
        mais = 1;
        document.getElementById("Qtd").value = Qtd +++ mais;
        if(document.getElementById("Qtd").value <= 0){
            document.getElementById("Qtd").value = 0;
        }
    }

    function Resultado(){
    var Qtd = document.getElementById("Qtd").value;
            var Vlr =  document.getElementById("Valor").innerHTML;
                document.getElementById("PPTTL").value = Qtd * parseInt(Vlr);
    }

Answer 1

Define a custom class or attribute for each action Dispatch(action trigger) within your product information container and then select all elements that have this defined feature, scroll over them and activate the events...

Example with custom attribute:

HTML:

    <!-- Atenção: como são múltiplos containers com ações semelhantes, então você não deve utilizar o atributo ID como está atualmente, pois o ID deve ser um atributo de identificação única e exclusiva de um elemento(tal como um CPF)! Se você tiver algum estilo sendo aplicado os ID's "Menos", "Mais" e outros eu sugiro que mude para classes. -->

    <!-- Definimos um atributo de ativação e seleção para os listeners... -->
    <!-- O atributo "action" configura em qual ação os "dispatchers" serão executados! -->
    <input data-action="click" data-dispatchers="menos;resultado" type="button" value="-">


    <input data-action="click" data-dispatchers="mais;resultado" type="button" value="+"><br><br>

JS:

    // Selecionamos os elementos que tem um ACTION ativado...
    const actionDispatchers = document.querySelectorAll('[data-action]');

    // Iteramos sobre os elementos selecionados acima...
    actionDispatchers.forEach(el => {
      // Capturamos o tipo de ação que será esperada...
      let action = el.getAttribute('data-action');
      // Capturamos os despachantes configurados para disparar e os fragmentamos...
      let dispatchers = el.getAttribute('data-dispatchers').split(';');

      // Ativamos o evento com o tipo de ação esperada...
      el.addEventListener(action, e => {
        // Iteramos sobre os despachantes capturados...
        dispatchers.forEach(dispatch => {
          // Executamos um switch case no despachante para definir qual rotina executar...
          switch (dispatch) {
            case "mais":
              Mais();
              break;
            case "menos":
              Menos();
              break;
            case "resultado":
              Resultado();
              break;
            default:
              return null;
          }
        });
      }, false);
    });

Well, that’s all, executing the above code after the page load will suffice to describe which action and dispatchers should be executed and define the routines beforehand so that they are called properly...