jQuery - Selector for duplicate ID's

Question

I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.

However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).

Is there a selector to select the visible duplicate ID?

I've tried the following but to no avail:

$('#my_element:visible').val();

Answer 1

As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.

Answer 2

Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.