javascript - jQuery code only applies on first element

Question

I am trying to hide certain <p> elements when the value of an option form equals 'x' The code works, but does only applie on the first element with the given ID.

My code is the following:

    jQuery(document).ready(function( $ ){
        var Privileges = jQuery('#form_1651_field_11');
    var select = this.value;
    Privileges.change(function () {
        if ($(this).val() == '3') {
            $('#hide_on_call').css("display", "block");
        }
        else $('#hide_on_call').css("display", "none");
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="input regeling" required="" style="width: 100%;">
        <option data-price="495.00" value="1"> Zelf betalen (€ 495,00)</option>
        <option data-price="0.50" value="3"> Factuur naar club of werkgever versturen (€ 0,50)</option>
    </select>

    <p id="hide_on_call"><label for="form_1651_field_12">Indien je club of werkgever betaald betaalt, vul dan onderstaande velden in:</label><br></p>
    <p id="hide_on_call"><label for="form_1651_field_14">Contactpersoon</label><br><input type="text" name="form_1651_field_14" id="form_1651_field_14" value="" label="Contactpersoon" class="input werkgever" style="width: 100%"></p>
    <p id="hide_on_call"><label for="form_1651_field_15">E-mailadres factuur</label><br><input type="text" name="form_1651_field_15" id="form_1651_field_15" value="" label="E-mailadres factuur" class="input werkgever" style="width: 100%"></p>

question from:https://stackoverflow.com/questions/65902421/jquery-code-only-applies-on-first-element

Answer 1

You have several issues in your code:

1. you are pointing to an element with id="form_1651_field_11" but it was not in your html.
2. you are using the same ID multiple times in your html. This is what classes are for. IDs are unique
3. you are using an obsolete syntax for jquery and a some unnecessary steps in your js.
4. your if/else block is missing some curly brackets

Also your logic seems weird for me. You are preselecting the option with value="1" (the p should be hidden) but the p are there. Only on change you hide them. Are you sure about it.

$(function() {
  $('#form_1651_field_11').change(function() {
    if ($(this).val() == '3'){
      $('.hide_on_call').css("display", "block");
    }else{
      $('.hide_on_call').css("display", "none");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="input regeling" required="" style="width: 100%;" id="form_1651_field_11">
  <option data-price="495.00" value="1"> Zelf betalen (€ 495,00)</option>
  <option data-price="0.50" value="3"> Factuur naar club of werkgever versturen (€ 0,50)</option>
</select>

<p class="hide_on_call"><label for="form_1651_field_12">Indien je club of werkgever betaald betaalt, vul dan onderstaande velden in:</label><br></p>
<p class="hide_on_call"><label for="form_1651_field_14">Contactpersoon</label><br><input type="text" name="form_1651_field_14" id="form_1651_field_14" value="" label="Contactpersoon" class="input werkgever" style="width: 100%"></p>
<p class="hide_on_call"><label for="form_1651_field_15">E-mailadres factuur</label><br><input type="text" name="form_1651_field_15" id="form_1651_field_15" value="" label="E-mailadres factuur" class="input werkgever" style="width: 100%"></p>