dependent drop in laravel with ajax doesn't work

**this is the blade **

    
                            <label class="form-label" for="basic-default-password12">اختر فصل دراسي</label>
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon11"><i class='bx bx-category-alt bx-tada'
                                        style='color:black'></i></span>
                                <select type="text" name="semester_id" class="form-control">
                                    <option value="">None</option>
                                    @foreach ($semesters as $key => $semester)
                                        <option value=""></option>
                                    @endforeach
                                </select>
                            </div>
                            <label class="form-label" for="basic-default-password12">اختر مرحلة دراسية</label>
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon11"><i class='bx bx-category-alt bx-tada'
                                        style='color:black'></i></span>
                                <select type="text" name="stage_id" class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            $('select[name="semester_id"]').on('change', function() {
                var semester_id = $(this).val();
                if (semester_id) {
                    $.ajax({
                        url: "/" + semester_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $('select[name="stage_id"]').html('');
                            var d = $('select[name="stage_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="stage_id"]').append(
                                    '<option value="' + value.id + '">' + value
                                    .stage_name + '</option>');
                            });
                        },

                    });
                } else {
                    alert('danger');
                }
            });
        });
    </script>

   satgecontroller

`public function GetStage($semester_id){         $data = Stage::where('semester_id',$semester_id)->orderBy('stage_name','ASC')->get();             return json_encode($data);      }`

**this is th web.php **

`Route::controller(StageController::class)->group(function(){
    Route::get('/stage/ajax/{semester_id}' , 'GetStage');

});`

i want to get the stage by semester_id when i choose the semester but when i choose any thing in semester the stage doesn't show me any results why my code doesn't work?

I have made several many attempts, but nothing works and I do not know why when I put Ajax CDN in the admin dashboard and restore it via

@extend(admin.admin.dashboard) 

a path that does not work, it requires me to put it in the same code

via Chebli Mohamed