hide same class javascript

Question

I tried to hide mutiple times the input :

 <input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">

with :

<script>


    $('#reclamation_id').hide();

</script>

The first modal work with the hidden input but the second one show me the input, could you told me what i'm doing work ?

Where my html :

<div class="modal" tabindex="-1" role="dialog" id="signature1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 1</h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_1" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="signature2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_2" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

in HTML, ```id``` needs to be unique. You cannot have two HTML elements with the same id. — Jonathan Rys, Oct 29 '18 at 17:47
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Oct 29 '18 at 17:51

score 1 · Accepted Answer · edited Oct 29 '18 at 18:31

You don't have to use same id name for two elements.

As w3schools.com talk about it:

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

So if you need to select them with only one JQuery command use the same class name. Because classes are more flexible and you can use the same class name for multiple elements.

For example:

$('.reclamation_class').hide()

<div class="modal" tabindex="-1" role="dialog" id="signature1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 1</h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_1" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id" class="reclamation_class" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="signature2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_2" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id"  class="reclamation_class" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

Jonathan Rys · Answer 2 · 2018-10-29T17:57:49.417

In HTML, id needs to be unique. You cannot have two HTML elements with the same id.

When you use document.getElementById("reclamation_id"); or $("#reclamation_id") you will see only one result. That's why only one of them is being changed by your code:

console.log("Vanilla JS:", document.getElementById("reclamation_id"));
console.log("jQuery:", $("#reclamation_id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" tabindex="-1" role="dialog" id="signature1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 1</h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_1" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="signature2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_2" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

It is recommended that you use a class name when referencing multiple elements.

score 0 · Answer 3 · answered Oct 29 '18 at 17:56

That is because you are using the element id to call the action. Using element's id will only find the first occurrence and then hide that one only. If you want it to be replaced globally, try calling it by class. It will replace all occurrences of the element by class on that page. See the jsbin here - https://jsbin.com/liwitaxefe/edit?html,css,js,output

$('.reclamation_id').hide();

    <div class="modal" tabindex="-1" role="dialog" id="signature1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 1</h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_1" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input class="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="signature2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
            </div>
            <div class="modal-body">
                <canvas id="signature_2" width="475px" height="225px"></canvas>
                <div class="buttons">
                    <button class="clear">Effacer</button>
                </div>
            </div>

            <div class="modal-footer">
                <input class="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
                <button class="save">Sauvegarder la signature</button>
            </div>
        </div>
    </div>

hide same class javascript

3 Answers3