Ajax infinite scroll not working with laravel table

Question

I want to display a table in a page with laravel and I want to add infinite scroll to load more rows after scrolling. I am using ajax to do that but it doesn't seem to be working and no errors appear in the console.

This is my controller function:

public function showRecentlySoldMakes($makeSlug)
{
    $recentlySoldVehicles = Vehicle::with('make','model')
                                ->where('make_id', $make->id)
                                ->where('sold', 1)
                                ->orderBy('id', 'desc')
                                ->paginate(20);

    return view('researches.make_sold')
        ->with('make', $make)
        ->with('recentlySoldVehicles', $recentlySoldVehicles);
}

This is my table:

                        <table class="table text-center table-striped table-bordered table-reports">
                        <thead>
                        <tr>
                            <th class="table-align" scope="col">Vin</th>
                            <th class="table-align" scope="col">Make</th>
                            <th class="table-align" scope="col">Model</th>
                            <th class="table-align" scope="col">Year</th>
                            <th class="table-align" scope="col">Sold for</th>
                            <th class="table-align" scope="col">Location</th>
                            <th class="table-align" scope="col">Transmission</th>
                            <th class="table-align" scope="col">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                            <div id="infinite-scroll">
                                @foreach($recentlySoldVehicles as $vehicle)
                                        <tr itemscope itemtype="http://schema.org/Car">

                                            <td style="display: none">
                                                <div itemprop="name" content="{{ $vehicle->year ." ".$vehicle->make->name . " " . $vehicle->model_name }}">
                                                </div>
                                            </td>
                                            <td class="table-align" itemprop="vehicleIdentificationNumber">{{ $vehicle->vin }}</td>
                                            <td class="table-align">{{ $vehicle->make->name }}</td>
                                            <td class="table-align">{{ $vehicle->model_name }}</td>
                                            <td class="table-align" itemprop="productionDate">{{ $vehicle->year }}</td>

                                            <td class="table-align">
                                                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                                                        <span itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
                                                                            <meta itemprop="priceCurrency" content="USD">$<meta
                                                                                    itemprop="price" content="{{ $vehicle->source->price }}">{{ number_format($vehicle->source->price, 2, '.', ',') }}
                                                                        </span>
                                                </div>
                                            </td>
                                            <td class="table-align">{{ $vehicle->city_name . ", " . $vehicle->state }}</td>
                                            <td class="table-align">{{ $vehicle->transmission }}</td>
                                            <td class="table-align"><a class="link-research" itemprop="url" href="{{ VehicleHelper::getVehicleUrl($vehicle) }}" target="_blank" rel="nofollow">View Vehicle</a></td>
                                        </tr>
                                @endforeach
                            </div>
                        </tbody>
                    </table>

And this is my script:

    <script type="text/javascript">

    var page = 1;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            page++;
            loadMoreData(page);
        }
    });

    function loadMoreData(page){

        $('.ajax-load').show();

        $.ajax({
            url: '?page=' + page,
            method: 'get',
            success: function(response) {
                console.log(response.url);
                if(response.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                console.log(response.html);
                $('.ajax-load').hide();
                $("#infinite-scroll").append(response.html);
            },
            error: function(jqXHR, ajaxOptions, thrownError) {
                alert('server not responding...');
            }
            });
    }
</script>

When i console the response.html in my script it is undefined. Am I missing something here?