Dependent dropdown not working ....

I have a LOCALITY dropdown dependent on a CITY dropdown...... its not working .... Any help ?

blade :

          <div class="row">
                                        <div class="col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <label class="form-label text-dark">City</label>
                                                <select class="form-control  select2 form-select" data-size="7" title="Select City" name="city" id="select-city" required="">
                                                    <option value="0">Select City</option>
                                                    @foreach ($cities as $data)
                                                    <option value="{{$data->id}}" {{ request('city') == $data->id ? 'selected' : '' }}>
                                                        {{$data->city_name}}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <label class="form-label text-dark">Locality</label>
                                                <select class="form-control  select2 form-select" name="locality" id="mySelect"  required="">
                                                    <option value="" selected="" disabled="">Select Locality</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>






{{-- script for locality download --}}
<script>
    $(document).ready(function() {
        $('select[name="city"]').on('change', function() {
            var city = $(this).val();
            if (city) {
                $.ajax({
                    url: "{{url('/locality/ajax')}}/" + city
                    , type: "GET"
                    , dataType: "json"
                    , success: function(data) {
                        var d = $('select[name="locality"]').empty();
                        var sel_locality = "Select locality";
                        $('#mySelect')
                            .append($("<option></option>")
                                .attr("value", " ")
                                .text(sel_locality));

                        $.each(data, function(key, value) {
                            $('select[name="locality"]').append('<option value="' + value.id + '">' + value.locality_name + '</option>');
                        });
                    }
                , });
            } else {
                alert('danger');
            }
        });
    });

</script>

Route :

   // Ajax route for fetching locality of a city dropdown
Route::get('/locality/ajax/{city}', [ListingsController::class, 'FetchLocality']);

Controller :

    public function FetchLocality($city)
    {

        $locality = Localities::where('locality_cityid', $city)->orderBy('locality_name', 'ASC')->get();
        return json_encode($locality);
    }

Any help ?