html - javascript for loop with dynamic div id -

this works create second pull down menu dynamically based on result of first pull down menu:

for (var = 0; < 1; i++) {     $('#wdiv' + i).change(function() {         var wdiv = $(this).val();          $.ajax({             type: "post",             url: "populate_classes.php",             data: 'theoption=' + wdiv,             success: function(whatigot) {                 $('#class_list' + i).html(whatigot);             }           }); //end $.ajax     }); //end dropdown change event  } 

why input drop down select #wdiv0 change drop down menu #class_list1? want #wdiv selection set #classlist0 drop down select.

here portion of form:

<fieldset><legend>select divisions</legend>                 <table width="100%" border="0" cellspacing="0" cellpadding="5">   <tr>     <td><div align="center"><u><strong>name</strong></u></div></td>     <td><div align="center"><u><strong>division</strong></u></div></td>     <td><div align="center"><u><strong>class</strong></u></div></td>   </tr>   <?php ($i = 0; $i < $wrestlerkey; $i++) {           $sql = 'select * tourn_division td t_num = ?';       $divresult = $dbconnect->fetchall($sql, $_session['tourn_id']);       $divcount = count($divresult);   ?>               <tr>       <td width="20%" bgcolor="#cccccc"><div align="right"><?php echo $_session['wfirst'][$i] . " " . $_session['wlast'][$i] . ":"; ?></div></td>       <td>         <select name="<?php echo "wdiv" . $i ?>" id="<?php echo "wdiv" . $i ?>">         <?php ($d = 0; $d < $divcount; $d++) { ?>           <option value="<?php echo $divresult[$d]->div_num; ?>"><?php echo $divresult[$d]->div_name; ?></option>         <?php } ?>         </select></td>       <td>       <div id="<?php echo "class_list" . $i ?>"></div>       </td>     </tr>     <?php } ?>   </table> </fieldset>   

it's happening because ajax callback handlers create both share reference same variable "i". avoid that, can create "success" handler separate function edit — in fact, due nature of code structure here, need make whole "change" callback in separate function:

function makechangehandler(listindex) {   return function() {     var wdiv = $(this).val();      $.ajax({         type: "post",         url: "populate_classes.php",         data: 'theoption=' + wdiv,         success: function(whatigot) {             $('#class_list' + listindex).html(whatigot);         }       });   }; }  // ...  (var = 0; < 2; i++) { // 2, substitute actual number of elements involved     $('#wdiv' + i).change( makechangehandler(i) ); } 

that function return actual handler function. each such function returned "makesuccesshandler" have it's own private copy of loop index.

(note edits made - whole "change" handler needs constructed in helper function.)