Using jQuery and Ajax to populate a table

I'want to get the selected value ( hotel_id) and then retrieve relevant records from the table using jQuery and Ajax , but it is filling tha table cells with the string "undefined" instead .

here are my Routes

Route::get('/home/Rooms', 'Admin\RoomsController@showform')->name('Rooms');
Route::post('/home/Rooms', 'Admin\RoomsController@makeTable')->name('Rooms.maketable');

my two functions in the controller

public function showform()
    {
        $hotelname  =  hotels::all();
        return view('admin.hotelrooms.index',compact('hotelname'));
    }
 }
    public function makeTable()
      {
        $data = hotelroom::where('hotel_id', '=', $request->get('value'));
          
        return Response::json($data);
    }

my view

             <select id="hotelname"  class="container-fluh"  >
                        <option value="">Choose Hotel </option>
                            @foreach($hotelname as $c) 
                       <option value="{{$c->hotelid}}">{{$c->hotelname}} </option>
                            @endforeach
              </select>
                    <div class="input-group-append">
                         <button id="dtl" class="btn btn btn-dark" type="button">Show Rooms Availabilty</button>
                    </div>               
                  </div>
                 </div>        
               <table class="table table-striped table-bordered " id="datatable">
                   <tr>
                     <th>Hotel ID</th> 
                     <th>Available Date</th> 
                     <th>Single Rooms</th>
                     <th>Double Rooms</th>  
                     <th>Delux Rooms</th>
                     <th>Delux Double Rooms</th>
                     <th>Superior Suit Rooms</th>                       
                   </tr>
                   </table> 
                </div>
        </section>

my script

$(document).ready(function(){   
   $( "#dtl" ).click(function() {
    var value = $("#hotelname :selected").val();
     $.ajax({
        url: "{{ route('Rooms.maketable') }}",
        method:'POST', 
        data : {value:value},
        
            success: function (data) {
              // console.log(data);
            $('#datatable tr').not(':first').not(':last').remove();
            var html = '';
            for(var i = 0; i < data.length; i++){
                html += '<tr>'+
                            '<td>' + data[i].hotel_id + '</td>' +
                            '<td>' + data[i].available_date + '</td>' +
                            '<td>' + data[i].singlerooms + '</td>' +
                            '<td>' + data[i].doublerooms + '</td>' +
                            '<td>' + data[i].deluxrooms + '</td>' +
                            '<td>' + data[i].deluxdoublerooms + '</td>' +
                            '<td>' + data[i].superiorsuitrooms + '</td>' +
                        '</tr>';
                }   
            $('#datatable tr').first().after(html);
        },
        error: function (data) {
        }
    });
});
});

can someone tell me where is the issue is