jQuery onclick function only works for the first element

Question

I have a select option with an <a> link like this:

<select id="varUsage" class="form-control">
    <option value="weight">Weight</option>
    <option value="color">Color</option>
    <option value="quality">Quality</option>
</select>

<a id="submitUsage" class="btn btn-primary btn-lg">Add</a>

Now I made this onclick function for when users click on Add:

$("#submitUsage").click(function(){
    var selectedUsage = $("#varUsage").val();
    $('#' + selectedUsage).removeAttr( 'style' );
});

So it basically picks the value of select input as selectedUsage variable and removes the style attribute of a div that has same id value.

So basically the default overview of divs goes like this:

<div id="weight" style="display:none">
....
</div>

<div id="color" style="display:none">
....
</div>

<div id="quality" style="display:none">
....
</div>

Now this function works fine only for id="weight" div. So when users choose Weight option from select menu list, the div with of weight appears properly on screen.

But this does not work for the other two options and their related divs are still hidden when they're selected.

So what's going wrong here?

How can I properly show custom div when it's selected in select option and then user pressed on the Add link?

`id` attributes have to be unique. The DOM only expects there to be one in the page, so if you re-use it the following elements will be ignored. To fix the problem use classes instead. — Rory McCrossan, Mar 01 '22 at 16:06
Also, I would strongly suggest you put the styling in an external stylesheet and then use `addClass()` and `removeClass()` to update the styling as needed instead of removing the `style` attribute at runtime — Rory McCrossan, Mar 01 '22 at 16:07
Another suggestion is to the correct semantic element - in this case you should be using ` — freedomn-m, Mar 01 '22 at 16:09
@RoryMcCrossan this doesn't appear to be a problem with duplicate IDs. I'm not entirely sure the problem has been reproduced in the question. Edit: Another jsfiddle showing it working fine https://jsfiddle.net/bt0mrcz6/ — freedomn-m, Mar 01 '22 at 16:10
That's true, it's an assumption on my part - I should have been more clear in my first comment, as the code works correctly as-is: https://jsfiddle.net/RoryMcCrossan/y9qbnw25/. In any case the question should be closed as requiring more detail — Rory McCrossan, Mar 01 '22 at 16:11
@firer as you can see from the two jsfiddle links provided above, your code *as provided* works as described. If it's not working for you there must be some other reason, maybe the `value=` doesn't match the div `id=`. Maybe you're not cancelling the `` default action (if it had a href='#' for example, then I would expect nothing to "work"). Maybe you're expecting the others to hide, but not mentioned that? Maybe there are other elements with those IDs on the page? Lots of other "maybe"s. — freedomn-m, Mar 01 '22 at 16:16

jQuery onclick function only works for the first element

0 Answers0