Dependency is not working while adding row (multiple drop-down area) dynamically in laravel using ajax

In the first dependency is working, no matter but when I add another row dynamically ( by addmore button ) then the dependency is not working. Here ajax code is working calling id attribute. I have tried this id attribute as an array so that in every row the id has changed also in ajax code but not worked. Here I am showing the code which is working for the first row but not working rest of the row which is added dynamically and I have removed the id attribute as an array and upload plain code.

My dependency will show every batch under a class in a coaching center.

route:

Route::get('/coaching/number-area/batch-and-subject-store-under-a-class-and-test/{test}','Coaching\ExamNumberCalculation@showExamSectionSubject')->name('exam.section.subject_show');

my blade form:

    <form  action="" method="post"> 
        @csrf

        <table class="table table-bordered" id="dynamicTable">  
            <tr>
                <th>Class (select one)</th>
                <th>Section (select one)</th>
                <th>Subject</th>
                <th>Mark</th>
                <th>Action</th>
            </tr>
            <tr>  
                <td>
                    <select required id="class" class="dynamic" data-dependent="section" type="text" name="showExamSectionSubject[0][class]">
                        <option value="" selected>--select option--</option>

                        @for( $j=1; $j<=12; $j++)
                        <option value="">Class - </option>
                        @endfor
                    </select>
                </td>  
                <td>
                    <select required id="section" name="showExamSectionSubject[0][section]">
                        <option value="" selected>--select option--</option>

                    </select> 
                </td>  
                <td>
                    <select required name="showExamSectionSubject[0][subject]">
                        <option value="" selected>--select option--</option>

                        @foreach($lists as $list)
                        <option value=""></option>
                        @endforeach
                    </select>
                </td>  
                <td>
                    <input id="Mark" name="showExamSectionSubject[0][Mark]" required="required" type="number"/> 
                </td>
                <td>
                    <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
                </td>  
            </tr>  
        </table> 

        <p class="login button"> 
            <input type="submit" value="Save" /> 
        </p>

    </form>

js code:

    <script type="text/javascript">

        var i = 0;

        $("#add").click(function(){

            ++i;

            $("#dynamicTable").append('<tr><td>'+
                    '<select required id="class" type="text" class="dynamic" data-dependent="section" name="showExamSectionSubject['+i+'][class]">'+
                        '<option value="" selected>--select option--</option>'+

                        '@for( $j=1; $j<=12; $j++)'+
                        '<option value="">Class - </option>'+
                        '@endfor'+
                    '</select>'+

                '</td><td>'+

                    '<select required id="section" type="text" name="showExamSectionSubject['+i+'][section]">'+
                        '<option value="" selected>--select option--</option>'+

                    '</select>'+

                '</td><td>'+
                    '<select required id="subject" type="text" name="showExamSectionSubject['+i+'][subject]">'+
                        '<option value="" selected>--select option--</option>'+

                        '@foreach($lists as $list)'+
                        '<option value=""></option>'+
                        '@endforeach'+
                    '</select>'+

                '</td><td>'+

                    '<input id="Mark" name="showExamSectionSubject['+i+'][Mark]" required="required" type="number"/>'+

                '</td><td>'+

                    '<button type="button" class="btn btn-danger remove-tr">Remove</button>'+

                '</td></tr>');
        });

        $(document).on('click', '.remove-tr', function(){  
             $(this).parents('tr').remove();
        });  

    </script>

//problem below this code
    <script>
        $(document).ready(function(){

            $('.dynamic').change(function(){
                if($(this).val() != '')
                {
                    var select = $(this).attr("id");
                    var value = $(this).val();
                    var dependent = $(this).data('dependent');
                    var _token = $('input[name="_token"]').val();
                    $.ajax({
                        url:"",
                        method:"POST",
                        data:{select:select, value:value, _token:_token, dependent:dependent},
                        success:function(result)
                        {
                            $('#'+dependent).html(result);
                        }

                    })
                }
            });

            $('#class').change(function(){
                $('#section').val('');
            });



        });
    </script>

this depencency controller:

 public function findSectionUnderClass(Request $request)
        {
            $fixed_identity = auth()->user()->FI;
            $select = $request->get('select');
            $value = $request->get('value');
            $dependent = $request->get('dependent');

            $data = CoachingSection::where($select, $value)
            ->where('inst_identity',$fixed_identity)
            ->get();
            $output = '<option value="">Select '.ucfirst($dependent).'</option>';
            foreach($data as $row)
            {
                $output .= '<option value="'.$row->name.'">'.$row->name.'|'.$row->gender.'|'.$row->start_time.'|'.$row->section_type.'</option>';
            }
            echo $output;
        }

the controller just shows the form.

I need help on this blade template and ajax code so that I get my dependency in every row that are added dynamically.

If any better solution do u have help me.

via Chebli Mohamed