Hi jQ and TGIF! 

Typical n00blet here, I have tried to answer this myself for the last two days and nothing I try works.

I have a form that will have 'n' amount of related or chained select boxes.  Meaning, as I view a main record there could be multiple sets of two dependent select boxes in the details window. (so the second select box is populated with children of select box #1)  The data in the details drives the number I'll need.  So on this record I could only need one set of select boxes (total of two) but the next record I may need ten.

What I'm struggling with is when I change the first select box the second select box needs to be populated.
If I only have one set I've got that working, it's when I have multiple of the same class, only the first one is getting manipulated.

How can make this select box change function find the very next select box and then do something with it and then when I change another 'acdsel' further in the form to do it again but to the next select in line from it?

The JavaScript is:

1. <script type="text/javascript">
   $(document).ready(function() {
   
   $('.acdsel').change(function() {
      var $td = $("select.acd2sel");
      var i = $td.index(this);
      var cssObj = {
         'background-color' : '#ddd',
         'color' : 'rgb(0,40,244)'
       }
      $td.eq(i+1).css(cssObj);
   
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

The first select box is classed "acdsel"

The second and related check box is classed = "acd2sel"

The Select boxes are in adjacent td's

I hope this enough information and did I say Thank the gods it's Friday already?
-aaron