How to prevent the first row of a table with two dropdown from dynamically change the value of second dropdown when changed?

I have a table which creates dynamically rows with two drop down lists. One for Subject and the next is for Topics. When a subject value is selected from first row of dropdown list of the table it will populate the topic drop down with appropriate topics name and ID in the second dropdown list in the same row through ajax call from database with laravel

 $('.addRow').on('click' ,function () {
                    addRow();
                });

                function addRow() {

                    var  tr =
                        '<tr>' +
                        '<td>' +
                        '<select class="form-control subject_selected" name="subject[]" id="subject">' +
                        '<option value=" ">--Select Subject-----</option>' +
                        "@foreach($subject_list as $subject)" +
                        "<option value=''></option>" +
                        "@endforeach"+
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<select class="form-control topic_selected" name="topic[]" id="topic">' +
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<input type="text" class="form-control" name="Amount[]" id="Amount"/>'+
                        '</td>' +
                        '<td>' +
                        '<a href="javascript:void(0)"  class="btn btn-danger remove">X</a>' +
                        '</td>' +
                        '</tr>';
                    $('tbody').append(tr);

                }
                
                                $(document).on('change','.subject_selected' ,function () {
                    var SubjectID = $(this).val();

                    if(SubjectID){
                        $.ajax({
                            url: "" + '/' + SubjectID,
                            typee: "GET",
                            dataType: "json",
                            success: function (data) {

                                $('.topic_selected').empty();
                                $.each(data,function (key , value) {
                                     console.log("Key" + key ,"Value" + value);
                                    $('.topic_selected').append('<option value="' + key + '">' + value+ '</option>');
                                });

                            },
                            error: function (data) {
                                console.log(data)
                            }
                        })
                    }else {
                        $('.topic_selected').empty();
                    }
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="table_tuition_fee">
                                                    <thead>
                                                         <tr>
                                                             <td><label for="subject">Subject</label></td>
                                                             <td><label for="topic">Topic</label></td>
                                                             <td><label for="Amount">Amount</label></td>
                                                             <td><a class="bg-light btn btn-info addRow" href="#"><i class="fa fa-plus"></i></a></td>
                                                         </tr>
                                                    </thead>
                                                     <tbody>
                                                         <tr>
                                                             <td>
                                                                 <select class="form-control subject_selected" name="subject[]" id="subject">
                                                                     <option value=" ">---Select Subject---</option>
                                                                     @foreach($subject_list as  $subject)
                                                                         <option value=""></option>
                                                                     @endforeach
                                                                 </select>
                                                             </td>
                                                             <td>
                                                                 <select class="form-control topic_selected" name="topic[]" id="topic">
                                                                 </select>
                                                             </td>
                                                             <td>
                                                                 <input type="text" class="form-control" name="Amount[]" id="Amount"/>
                                                             </td>
                                                             <td>
                                                                 <a href="javascript:void(0)"  class="btn btn-danger remove">X</a>
                                                             </td>
                                                         </tr>
                                                     </tbody>
                                                   <tfoot>
                                                       <tr>
                                                           <td style="border: none"></td>
                                                           <td style="border: none"></td>
                                                           <td style="border: none"></td>
                                                           <td><button class="btn btn-success" id="add_student">SEND</button></td>
                                                       </tr>
                                                   </tfoot>
                                               </table

. But the problem arises when a new row is added,then here i will have two rows with four the same dropdown,but when i tried to change subject name from the second row it results into change of both topic row i.e in first row and the second one and so on. So how will i achieve it? I want each row to depend itself i.e when i select a subject from second row must not change with the one in first row.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2R9IHyi
via IFTTT