issue on two multiple dropdown - php

Question

https://i.stack.imgur.com/2O2Ug.png
when i change course name first row change only that row parent topic
how to do this please give advice
first course name select box code
<select class="form-control select2" onChange="getval(this.value)"; id="course_id1" name="course_id[]" data-live-search="true" >
<option value="" selected="selected"> Select Course Name</option>
<?php
$sql = "SELECT * from course_master";
$result = $connect->query($sql);
while($row_pt = $result->fetch_array())
{
?>
<option value="<?php echo $row_pt['course_id']; ?>" ><?php echo $row_pt['course_name']; ?></option>
<?php
}
?>
</select >
second select box when i select course name from drop down change that row parent id
<select class="form-control select2" id="parent_id" name="parent_id[]" data-live-search="true" ></select>
call function on change in course name
function getval(val)
{
$.ajax({
type: "POST",
url: "get.php",
data: {parent_id:val,syllabus_id:syllabus_id},
success: function(data)
{
$("#parent_id").html(data);
}
});
}
get.php
<?php
include('connection/core.php');
if(isset($_SESSION['userId']))
{
if (!empty($_POST["parent_id"]))
{
$query_sql = "SELECT syllabus_id,topic_name FROM syllabus WHERE syllabus_id!='". $_POST["syllabus_id"]."' AND course_id ='" .$_POST["parent_id"] ."'";
$results = $connect->query($query_sql);
echo $query_sql;
?>
<option value="0" selected> Parent </option>
<?php
foreach ($results as $p)
{
?>
<option value="<?php echo $p["syllabus_id"]; ?>"><?php echo $p["topic_name"]; ?></option>
<?php
}
}
}
?>

Answer 1

Add below code for your first row.
For example.
<select class="form-control select2 selectCourse" data-id="1" id="course_id_1" name="course_id_1[]" data-live-search="true" >
And for your parent topic name add as below.
<select class="form-control select2" id="parent_id_1" name="parent_id_1[]" data-live-search="true"></select>
Now when you are adding new dynamic row in your HTML then add selectCourse as class name in your select box of course name AND data-id="1" for each dynamically added row.
For example.
For course name add as below.
<select class="form-control select2 selectCourse" data-id="2" id="course_id_2" name="course_id_2[]" data-live-search="true" >
For parent topic name add as below.
<select class="form-control select2" id="parent_id_2" name="parent_id_2[]" data-live-search="true"></select>
In your script add code as below.
<script type="text/javascript">
$(document).on('change', '.selectCourse', function(){
var course_id = $(this).attr('data-id');
var val = $(this).find(":selected").val();
var syllabus_id = 1;
$.ajax({
type: "POST",
url: "get.php",
data: {parent_id:val,syllabus_id:syllabus_id},
success: function(data)
{
$("#parent_id_" + course_id).html(data);
}
});
});
</script>