Почему я не могу использовать цепочку JQuery в состоянии цикла?

  <?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>

Я хочу сделать список таблиц для отображения цепочки выпадающего, чтобы отобразить так:

и цепочка выпадающего списка работает так:

но он будет отображаться только в первом ряду, в другом — не работает.

Вы можете выглядеть так:

Я надеюсь, что я могу приковать цепочку выпадающих для всех строк. Кто-нибудь найдет решение?