نمایش استان ها و شهرها

سلام دوستان.
من با استاده از دو جدول استان ها و شهرها رو داخل دیتابیس ذخیره کردم.
جدول provinces:

Schema::create('provinces', function (Blueprint $table) {
            $table->id();
            $table->string('province');
            $table->timestamps();
        });

جدول cities:

Schema::create('cities', function (Blueprint $table) {
            $table->id();
            $table->string('city');
            $table->foreignId('province_id')->constrained()->onDelete('CASCADE');
            $table->timestamps();
        });

حالا تو یه فرمی میخوام وقتی داخل سلکت باکس استان ها، اصفهان انتخاب شد، داخل سلکت باکس شهرها لیست شهرهای اصفهان نمایش داده بشه ولی این اتفاق نمیوفته، مشکل از کجاس؟

<div class="form-group row">
                                    <div class="col-lg-6">
                                    <label for="province" class="control-label">استان</label>
                                    <select name="province" class="form-control">
                                        <option value="" disabled selected>لطفا استان خود را انتخاب نمایید</option>
                                        @foreach(\App\Models\Province::all() as $province)
                                            <option value="{{ $province->id }}">{{ $province->name }}</option>
                                        @endforeach
                                    </select>
                                        @error('estate')
                                            <p id="error">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="col-lg-6">
                                        <label for="city" class="control-label">شهر</label>
                                        <select name="city" class="form-control">
                                            <option value="">select</option>
                                        </select>
                                        @error('city')
                                            <p id="error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

کدهای js:

$("document").ready(function () {
                $('select[name="province"]').on('change', function (e) {
                        $.ajax({
                            url: "{{ route('jobs.create') }}",
                            type: "GET",
                            dataType: "json",
                            success: function (data) {
                                $('select[name="city"]').empty();
                                $.each(data, function (key, value) {
                                    $('select[name="city"]').append('<option value=" ' + key + '">' + value + '</option>');
                                })
                            }

                        })
                });
            });

@mhyeganeh
@gomnam
@juza66
@abdolrahman