Jquery: Selecting Siblings of $(this)

Question

I'm trying to get jquery to see when an element is changed and then run an action that involves it sibling like this:

$('.row').find('#class').change(function(){
        $(this).siblings('#teacher').removeAttr('disabled');
        var class_id = $(this).val();
    });

so when the input with an id of class is changed it will get its value and then affect its sibling with an id of teacher . They are both inside of <div class="row"> and this is repeated several times on the page.

The HTML:

<div class="row">
    <div class="grid_2">
        <select name="class" id="class">
        <option></option>
            //PHP that loads choices
        </select>
    </div>

        <div class="grid_2">
            <select name="teacher" id="teacher" disabled="true">
                 //Ajax loads choices
            </select>
        </div>
</div>

This is repeated Several times through out the page.

What I need help with is how to select the 2nd select box when the first one (next to it) changes.

Thanks for the help.

edit: When i try to console.log $(this).siblings() it comes back with [] as a result.

Answer 1

While you should never have multiple elements with the same ID, if you do, you could select them with an attribute selector:

$(this).siblings('[id=teacher]');

For more info, see: Several elements with the same ID responding to one CSS ID selector