problems in query with select nested on ajax request

Question

I hope you can help me! I am using this method to make a nested select but I can not find a solution, I will share the code of my project

I am trying to bring the id of the fruits through the controller and depending on those id, filter by ajax the varieties that are available

//in the view

<div class="col-md-4">
        <div class="form-group">
        {{ Form::label('fruit_id', 'Selecciona un tipo de fruta') }}
        {{Form::select('fruit_id', $listFruits, null, ['class' => 'form-control',
        'id'=>'fruits',
        'required',
         'placeholder'=>'Seleccione una opción'])}}
        </div>
    </div>



    <div class="col-md-4">
     <div class="form-group">
        <label for="career" class="">Variedad de la fruta</label>
            <select id="varieties" data-old="{{ old('variety_id') }}" name="variety_id" class="form-control{{ $errors->has('variety_id') ? ' is-invalid' : '' }}"></select>
                @if ($errors->has('variety_id'))
                    <span class="invalid-feedback" role="alert">
                    <strong>{{ $errors->first('variety_id') }}</strong>
                    </span>
                @endif
       {{ csrf_field() }}
     </div>
</div>

//The script
<script>
//Select dinamico 
    $(document).ready(function(){
        $('#fruits').on('change', function(){
            var fruit_id = $(this).val();

            if($.trim(fruit_id)!=''){
                $.get('varieties', {fruit_id: fruit_id}, function(varieties){
                    $('#variety').empty();
                    $('#variety').append("<option value=''>Seleccione una opción</option>");
                    $.each(varieties,function(index, value){
                        $('#variety').append("<option value='"+index+"'>"+value+"</option>");
                    });

                });
            }
        });
    });
</script>
´´´



in the console of browser

jquery.min.js:2 GET http://127.0.0.1:8000/receptions/varieties?fruit_id=2