Dropdown dependenciees

app.js

<!-- BEGIN: JS Assets-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- END: JS Assets-->

<script>
    function onChangeSelect(url, id, name) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: url,
            type: 'GET',
            data: {
                id: id
            },
            success: function (data) {
                const arrRegion = ['province', 'city', 'district', 'village'];
                const index = arrRegion.indexOf(name);
                for (let i = index; i < arrRegion.length; i++) {
                    $(`#${arrRegion[i]}`).empty();
                    $(`#${arrRegion[i+1]}`).prop('disabled', true);
                }

                $('#' + name).append(`<option>Select ${name} </option>`);

                $.each(data, function (key, value) {
                    $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                });
            }
        });
    }
    $(function () {
        $('#province').on('change', function () {
            $('#city').prop('disabled', false);
            onChangeSelect('{{ route("cities") }}', $(this).val(), 'city');
        });
        $('#city').on('change', function () {
            $('#district').prop('disabled', false);
            onChangeSelect('{{ route("districts") }}', $(this).val(), 'district');
        })
        $('#district').on('change', function () {
            $('#village').prop('disabled', false);
            onChangeSelect('{{ route("villages") }}', $(this).val(), 'village');
        })
    });
</script>

index.html

<label for="my-modal-4" class="modal cursor-pointer">
    <label class="modal-box  max-w-2xl relative" for="">
        <h3 class="text-xl font-bold text-center">New Address</h3>
        <label for="my-modal-4" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
        <form action="#" method="POST">
            @csrf
            <input type="hidden" name="user_id" value="{{ Auth::user()->id }}" class="form-control">
            <div>
                <label class="label">
                    <span class="label-text text-lg font-medium">Label Address</span>
                </label>
                <input type="text" placeholder="e.g Home, Apartment, Office"
                    class="input input-bordered w-full max-w-xs" />
            </div>
            <div class="flex gap-4">
                <div>
                    <label class="label">
                        <span class="label-text text-lg font-medium">Recipient's name</span>
                    </label>
                    <input type="text" placeholder="Citra" class="input input-bordered w-full max-w-xs" />
                </div>
                <div>
                    <label class="label">
                        <span class="label-text text-lg font-medium">Phone Number</span>
                    </label>
                    <input type="text" placeholder="08xxxxxxxxxx" class="input input-bordered w-full max-w-xs" />
                </div>
            </div>
            <div class="flex justify-between gap-4">
                <div class="w-full">
                    <label class="label">
                        <span class="label-text text-lg font-medium">Province</span>
                    </label>
                    <select class="select select-bordered w-full max-w-xs" name="province" id="province">
                        <option>Select Province</option>
                        @foreach ($provinces as $province)
                        <option value="{{ $province->id }}">{{ $province->name }}</option>
                        @endforeach
                    </select>

                </div>
                <div class="w-full">
                    <label class="label">
                        <span class="label-text text-lg font-medium">cities</span>
                    </label>
                    <select class="select select-bordered w-full max-w-xs" name="city" id="city" disabled>
                        <option>Select City</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-between gap-4">
                <div class="w-full">
                    <label class="label">
                        <span class="label-text text-lg font-medium">Districts</span>
                    </label>
                    <select class="select select-bordered w-full max-w-xs" name="district" id="district" disabled>
                        <option>Select District</option>
                    </select>
                </div>
                <div class="w-full">
                    <label class="label">
                        <span class="label-text text-lg font-medium">Villages</span>
                    </label>
                    <select class="select select-bordered w-full max-w-xs" name="village" id="village" disabled>
                        <option>Select Village</option>
                    </select>
                </div>

            </div>

            <div>
                <label class="label">
                    <span class="label-text text-lg font-medium">Zip Code</span>
                </label>
                <input type="text" placeholder="56371" class="input input-bordered w-full max-w-xs" />
            </div>
            <div>
                <label class="label">
                    <span class="label-text text-lg font-medium">Full Address</span>
                </label>
                <textarea class="textarea textarea-bordered w-full" placeholder="Full Address"></textarea>
            </div>
            <div>
                <label class="label">
                    <span class="label-text text-lg font-medium">Notes</span>
                </label>
                <textarea class="textarea textarea-bordered w-full" placeholder="Notes"></textarea>
            </div>
            </>
            <div class="modal-action">
                <label for="my-modal-4" class="btn">Submit</label>
            </div>
        </form>
    </label>
</label>