невозможно создать динамический раскрывающийся список

Question

сильный текст

Я создаю динамический выпадающий список с таблицей отелей и номеров. Когда я выбираю отель и номер этого отеля отображается в раскрывающемся списке.

$(document).ready(function() {
$('select[name="hotel"]').on('change', function(){
    var hotelId = $(this).val();
    if(hotelId) {
        $.ajax({
            url: '/room/get/'+hotelId,
            type:"GET",
            dataType:"json",
            beforeSend: function(){
                $('#loader').css("visibility", "visible");
            },

            success:function(data) {

                $('select[name="room"]').empty();

                $.each(data, function(key, value){

                    $('select[name="room"]').append('<option value="'+ key +'">' + value + '</option>');

                });
            },
            complete: function(){
                $('#loader').css("visibility", "hidden");
            }
        });
    } else {
        $('select[name="room"]').empty();
    }

});
});

и вот индекс функции ().

public function index()
      {
              $hotel = DB::table('hotel')->pluck("name","id");
                           return view('hotel.price_insert',compact('hotel'));
                        }

                public function getStates($id)
                         {
                           $room = DB::table("room")->where("hotel_id",$id)->pluck("room_name","id")->toJson();

                           return json_encode($room);



                        }