Why I can't use chained jquery in loop condition?

Question

  <?php
  foreach ($employee as $data) {
  ?>
  <tr>
   <td>
      <form action="<?php echo base_url();?>controller_admin/updateEmployee/<?php echo $data->id_employee;?>" method="post">
      <select style="width: 100px; height: 33px;" name="directorate" id="directorate">
        <option selected value="<?php echo $data->id_directorate ?>"><?php echo $data->directorate ?></option>
        <?php
          foreach ($directorate as $key) { 
            if ($data->directorate != $key->directorate) {?>
              <option value="<?php echo $key->id_directorate ?>"> 
                <?php echo $key->directorate; ?>
              </option>
            <?php 
            } 
          }
        ?>
      </select>
    </td>
    <td>
      <select style="width: 100px; height: 33px;" name="department" id="department">
        <?php if ($data->id_department!=null) {?>
        <option value="0"></option>
        <?php
        } ?>
        <option selected value="<?php echo $data->id_department ?>"><?php echo $data->department; ?></option>
        <?php
          $value = 1;
          foreach ($department as $key) { 
            if ($data->department != $key->department) {?>
              <option 
              class="<?php echo $key->id_directorate ?>"
              value="<?php echo $value ?>"> 
              <?php echo $key->department; ?>
              </option>
        <?php
          $value++;
            }
          }
        ?>
      </select>
    </td>
    <td>
      <select style="width: 100px; height: 33px;" name="section" id="section">
        <?php if ($data->id_section!=null): ?>
        <option value="0"></option>  
        <?php endif ?>
        <option selected value="<?php echo $data->id_section ?>"><?php echo $data->section; ?></option>
        <?php
        $value = 1;
        foreach ($section as $key) { 
          if ($data->section != $key->section) {?>
            <option 
            class="<?php echo $key->id_department ?>"
            value="<?php echo $value ?>"> 
            <?php echo $key->section; ?>
            </option>                              
      <?php
        $value++;
          }
        }
      ?>
      </select>
    </td>
    <td>
        <button type="submit" class="btn btn-warning"><i class="fa fa-edit"></i></button>
        <a href="<?php echo base_url();?>controller_admin/deleteEmployee/<?php echo $data->id_employee;?>"> <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></a>
      </form>
    </td>
<?php
  }
?>

<script src="<?php echo base_url();?>assets/js/jquery.chained.min.js"></script>
<script>
$("#department").chained("#directorate"); 
$("#section").chained("#department"); 
</script>

I want to make a list of table to display chained dropdown to display like this:

and chained dropdown work like this:

but, it will display in first row only, at another row, it does not work.

You can look like this:

I hope I can chained dropdown for all rows. Anyone find the solution?

Answer 1

you could try to put your js code inside the ready function - its possible that the elements are not even rendered when you try to select them.

<script>
$( document ).ready(function() {
    $("#department").chained("#directorate"); 
    $("#section").chained("#department"); 
});
</script>

reference: http://learn.jquery.com/using-jquery-core/document-ready/