ajax jquery when i click addnewfield dependent dropdown not working . not data coming or changing

//here my blade

	<div >
            <label for="field" class="font-weight-bold">Διάλεξε Ειδικοτητα και κατηγορια μελετητων </label>
            <div  id="dynamic-field-1" class="form-group row dynamic-field" >
                <div class="col-sm-4">
                    <select class="form-control" type="text" id="category" name="specialities[]" />
                    <option value="" selected disabled hidden>Choose here</option>
                        @foreach($specialities as $id => $speciality)
                        <option value="{{ $id }}" {{ in_array($id, old('specialities', [])) ? 'selected' : '' }}>{{ $speciality }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('specialities'))
                        <div class="invalid-feedback">
                            {{ $errors->first('specialities') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.experience.fields.specialities_helper') }}</span>
                </div>  
                <div class="col-sm-8">
                    <select class="form-control select2" type="text" name="surveys[]" id="survey" multiple></select>
                </div>
                
            </div>
        </div>

// here my script

		<script>
	$(document).ready(function() {
	var buttonAdd = $("#add-button");
 var buttonRemove = $("#remove-button");
var className = ".dynamic-field";
var count = 0;
var field = "";
var maxFields = 3;
var surveyList = [];



$('#category').on('change', function() {
   var categoryID = $(this).val();
   if(categoryID) {
       $.ajax({
           url: '/admin/getExpirience/'+categoryID,
           type: "GET",
           data : {"_token":"{{ csrf_token() }}"},
           dataType: "json",
           success:function(data)
           {
            console.log(data);
             if(data){
                $('#survey').empty();
                $('#survey').append('<option hidden>Κατηγορία Μελετών</option>'); 
                $.each(data, function(key, survey){
                    console.log ($('select[name="surveys[]"]').append('<option value="'+ survey.specialties +'">' + survey.name + '</option>'));
                   
                });
            }else{
                $('#survey').empty();
            }
         }
       });
   }else{
     $('#survey').empty();
   }
});





function totalFields() {
  return $(className).length;
}

function addNewField() {
  count = totalFields() + 1;
  field = $("#dynamic-field-1").clone();
  field.attr("id", "dynamic-field-" + count);
  field.children("label").text("Field " + count);
  field.find("#survey").val("");
  field.attr("id", "dynamic-field-" + count);
  $(className + ":last").after($(field));
}

function removeLastField() {
  if (totalFields() > 1) {
    $(className + ":last").remove();
  }
}

function enableButtonRemove() {
  if (totalFields() === 2) {
    buttonRemove.removeAttr("disabled");
    buttonRemove.addClass("shadow-sm");
  }
}

function disableButtonRemove() {
  if (totalFields() === 1) {
    buttonRemove.attr("disabled", "disabled");
    buttonRemove.removeClass("shadow-sm");
  }
}

function disableButtonAdd() {
  if (totalFields() === maxFields) {
    buttonAdd.attr("disabled", "disabled");
    buttonAdd.removeClass("shadow-sm");
  }
}

function enableButtonAdd() {
  if (totalFields() === (maxFields - 1)) {
    buttonAdd.removeAttr("disabled");
    buttonAdd.addClass("shadow-sm");
  }
}

buttonAdd.click(function() {
  addNewField();
  enableButtonRemove();
  disableButtonAdd();
});

buttonRemove.click(function() {
  removeLastField();
  disableButtonRemove();
  enableButtonAdd();
});

});

//and my route

	Route::get('getExpirience/{id}', function ($id) {
    $survey = App\Models\Survey::where('specialties', $id)->distinct()->get();
    return response()->json($survey);
});