How to use dynamic ListBoxes in php(Laravel) - php

Question

Actually I am developing one website where i want to assign orders to delivery staff and area or bakers from where he will pick up the delivery material.
Above picture shows area name and bakers from where delivery staff will pickup the delivery material. So for each order (row) i want to create 2 List Boxes and depending on selection of 1st listbox i want to change the content of 2nd listbox.
<select name="<?phpecho $CurrentOrders->comment_ID; ?>" id="courseid" style="width:100%;">
<option value="">-----Select Pick Up Area----</option>
<?php
$Area = DB::table('area')
->get();
foreach ($Area as $Area) {
?>
<option id="<?php echo $Area->area_id; ?>" value="<?php echo $Area->area_name; ?>"><?php $Area->area_name; ?></option>
<?php } ?>
</select>
</td>
Above code is to create dynamically listboxes.
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#1").change(function () {
var id = $(this).val();
var dataString = 'id=' + id;
//alert(dataString);
$.ajax({
type: "POST",
url: "ajax_section.php",
//data: dataString,
data: {'id': id},
success: function (html){
$("#sectionid").html(html);
},
error: function () {
alert('Error');
}
});
});
});
</script>
Above script is to create the content of 2nd listboc based on selection of 1st listbox.
<?php
if($_POST['id']) {
$id=$_POST['id'];
$sql=DB::table('vendors')
->where('vendors_area','=',$id)
->get();
$count=0;
foreach($sql as $sql) {
$count++;
}
if ($count > 0) {
echo "<option selected='selected'>---- Select Section Name ---- </option>";
foreach($sql as $sql) {
$id=$sql->vendors_id;
$data=$sql->vendors_name;
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
}
?>
And above code is to create and show the content of 2nd listbox based on selection of 1st.
But all this codes are working for only 1 listbox. It is not working dynamically Even if have changed written scripts for all listboxws as i written for 1st listbox(as #1).
please help me out.

Answer 1

You need to change
$("#1").change(function ()
to
$(document).on('change',"#1",function()
in your javascript code