Applying one jQuery change event to infinite potential html inputs, use same id for them all?

Question

I need to have the ability for the user to click a '+' which adds a new drop-down to an infinitely expanding collection of drop-downs. If I give them all the same id, will the jQuery change event know which one called the change event based on $(this) or do I need to have a new id for each new drop-down that is created during the page lifetime?

...if there is another control that must change in relation to which drop-down was changed, will there be a way to know which one relates to it if they all have the same id? (picture two drop-downs side by side where changing the first one changes the options on the second one, so it's like an infinitely expanding collection of PAIRS of drop-downs that relate to each other)

Answer 1

Don't give them the same ID as that is not valid and will not work. Give them the same class.

Answer 2

"The global structure of an HTML document" (HTML 4.01 Specification) on the id attribute:

This attribute assigns a name to an element. This name must be unique in a document.

So: in order to avoid unexpected behaviour, better keep your ids unique.

If you use JQuery's $(this) inside the change event, JQuery "will know" which one called it:

$('#id').change(function(){
  $(this).doWhatYouWantCauseAPirateIsFree();
});
// or
$('.class').change(function(){
  $(this).doWhatYouWantCauseAPirateIsFree();
});

The docs on Traversing help you finding the right function to use to find the elements you want to change.

Answer 3

Rather than an id, use a class attribute. If you define a function for each item with a particular class, the function can access $(this) to determine what to do.

$(".my-class").each(function(){
    var current_plus = $(this);
    //now do something with the variable
});