dependent drop in laravel with ajax doesn't work

Question

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="{{ $semester->id }}">{{ $semester->semester_name }}</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: "{{ url('/stage/ajax') }}/" + 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>

StageController:

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

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