[jQuery] Problem 2 select boxes in same form

[Allan]

Newbie alert!

I'm using jQuery to handle the show/hide of a div depending on option
selected in a select box (based on code posted here previously):

$(document).ready(function() {
         var $idOptionDivs = $("[EMAIL PROTECTED]'IDoption']").hide();
         var $rnOptionDivs = $("[EMAIL PROTECTED]'reasonopt']").hide();

//display div's related to ID Option

         $('#doc_id').change(function() {
           var i = $('option', this).index( $(':selected')[0]);
           $idOptionDivs.hide().eq(i).show();
         });

//display div's related to registration reason

         $('#reason').change(function() {
                var j = $('option', this).index( $(':selected')[0]);
           $rnOptionDivs.hide().eq(j).show();
         });

});

The above code is linked to two simple select boxes - won't bore you
with that code.

Works fine if there is 1 select box but problem is when adding a
second select box (say, another part of a registration form) the
second select box doesn't pass the correct index - it always passes
back '-1' no matter which option is selected.

I know the code will work but I just can't understand why this error
is occurring - bizarre thing is that when switching round the order of
the select boxes the first one always works - second doesn't.

Not sure if this is a jQuery issue but any help would be appreciated!!

Thanks

Al