JavaScript count in line with PHP loop -

i have page 2 drop-down menus. option selected in first drop-down menu controls displayed in second.

the code nice , easy when drop-down menus used once - i'm looking repeat each set of drop-down menus four times.

drop-down menu 1 assigned id experience[<?php echo $i; ?>][manufacturer]. drop-down menu 2 assigned id experience[<?php echo $i; ?>][type].

essentially, i've got is:

<select id="experience[1][manufacturer]">...</select> <select id="experience[2][manufacturer]">...</select> <select id="experience[3][manufacturer]">...</select> <select id="experience[4][manufacturer]">...</select> 

... followed by:

<select id="experience[1][type]">...</select> <select id="experience[2][type]">...</select> <select id="experience[3][type]">...</select> <select id="experience[4][type]">...</select> 

i'm wondering: what's best way equivalent of <?php echo $i; ?> chunk of javascript that's used output contents of second drop-down menu? (i know can't use php directly within javascript - left <?php echo $i; ?> snippets indicate need output numbers 1, 2, 3, 4 etc.

thanks help!

code:

<form>  <?php  $i=1;  while($i<=4) {  ?>      <select id="experience[<?php echo $i; ?>][manufacturer]">     <option value="ford">ford</option>     <option value="honda">honda</option>     <option value="mercedes">mercedes</option>     </select>      <select id="experience[<?php echo $i; ?>][type]">      <script type='text/javascript'>     $(document).ready(function() {         $("#experience[<?php echo $i; ?>][manufacturer]").change(function() {             $("#experience[<?php echo $i; ?>][type]").load("get_type.php?choice=" + $("#experience[<?php echo $i; ?>][manufacturer]").val());         });     });     </script>      </select>  <?php  $i++;  }  ?>  </form> 

revised code:

<form>  <script type='text/javascript'>     $(document).ready(function() {         $(".experiencemanufacturer").change(function() {             $("#experience["+$(this).attr('data-id')+"][type]").load("get_type.php?choice=" + $(this).val());         });     });     </script>  <?php $i=1; while($i<=4) { ?>      <select id="experience[<?php echo $i; ?>][manufacturer]" class="experiencemanufacturer" data-id="<?php echo $i; ?>">     <option value="ford">ford</option>     <option value="honda">honda</option>     <option value="mercedes">mercedes</option>     </select>      <select id="experience[<?php echo $i; ?>][type]">     </select>  <?php $i++; } ?>  </form> 

you should not need include script element in php loop.

instead, should add similar class common select elements. class="experience"

then, single script element can attach events selects:

<script type='text/javascript'>     $(document).ready(function() {         $("select.experience").each(function(i,element){             // here element actual item selected set, index             $(element).on("change", function() {                 $("#experience[" + + "][type]").load("get_type.php?choice=" + $(element).val());             });         });     }); </script>