Problem with JS and id that only work with the first id used

Question

I’m not a professional developer, but as in any workplace, technical support does everything.

I was asked to create a support page for the external sales team, where they can include information about the customer in question. In such a case, simple information such as: Product X, do you have in place? YES or NO. If so, enter the value practiced by the customer.

I found it here in the website, an answer that helped me a lot with this. Follow the code I used:

PRODUTO X: <select name="produtox" id="valor_sim" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select><br>
      
      <div id="inputOculto">
        VALOR INTENSE: <input name="produtox_valor" id="valor_sim" type="number" min="0" max="9999"><br>
      </div>

This is the JS code:

<script type='text/javascript'>
  $(document).ready(function() {
    $('#inputOculto').hide();
    $('#valor_sim').change(function() {
      if ($('#valor_sim').val() == 'SIM') {
        $('#inputOculto').show();
      } else {
        $('#inputOculto').hide();
      }
    });
  });
</script>

So far so good, the code works perfectly. The problem, is that in the next products, this does not work on them, only in the first. I did some research, and I saw that it could be because id is the same for everyone, and I found an answer about using the option this at that link, but as I do not understand the use and I do not know if it would be the case to use it, I ask for help in this situation.

Thank you.

Answer 1

You’re going through this trouble just by using the id, id is works as a unique identifier, so you cannot repeat it, because only the first occurrence is "valid", the others will be ignored.

For that there is the attribute class that serves for you to classify the elements, and this attribute allows receiving several classes(classifiers).

$(document).ready(function() {

  var produtoX = $('#produto-x');
  var produtoY = $('#produto-y');
  
  inicializarProduto(produtoX);
  inicializarProduto(produtoY);

});

function inicializarProduto(produto) {
  var valorProduto = produto.find('.valor-produto');
  valorProduto.hide();
  produto.find('.seletor-produto').change(function() {
    if (this.value == 'SIM') {
      valorProduto.show();
    } else {
      valorProduto.hide()
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="produto-x" class="linha-produto">
      Produto X:
      <select name="produto-x" class="seletor-produto" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select>

      <div class="valor-produto">
        VALOR INTENSE: 
        <input name="produto-x_valor" type="number" min="0" max="9999">
        <br/>
      </div>
    </div>

    <div id="produto-y" class="linha-produto">
      Produto Y:
      <select name="produto-y" class="seletor-produto" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select>

      <div class="valor-produto">
        VALOR INTENSE: 
        <input name="produto-y_valor" type="number" min="0" max="9999">
        <br/>
      </div>
    </div>

jQuery may even seem simple to do something, but as your application/page grows, it gets harder and harder to maintain.

I strongly suggest you take a look at Vuejs as it is a simple and easy js framework to learn. Other than React or Angular you do not need to set up any development environment, you will be able to start your development similar to jQuery by importing the framework with <script src="..."></script> and opening another tag <script> to program your page.

There you can gradually learning and evolving your page to an application and as you learn it will become more sophisticated, using tools to build, routes to other pages and etc...

The most important thing is that you will end up writing less than with jQuery using components and having to write less to interact between javascript and html to make your application truly dynamic.