无休止地在网页上滚动

I have an issue with endless scrolling of the page. New data reading from next page happens, but it appends to the top of the page, not buttom, as it should. Please help solve the problem!

Controller:

public function index(Request $request)
{
    $posts = Post::paginate($this->posts_per_page); 

    if ($request->ajax()){
        return [
            'posts' => view('ajax.index', compact('posts'))->render(),
            'next_page' => $posts->nextPageUrl()
        ];
    }

    return view('index', compact('posts'));
}

and here is the script:

$(document).ready(function(){
    $(window).scroll(fetchPosts);
    function fetchPosts() {
    var page = $('.endless-pagination').data('next-page');

    if (page !== null) {
        clearTimeout( $.data( this, "scrollCheck" ));

        $.data( this, "scrollCheck", setTimeout(function() {
            var scroll_position_for_posts_load = $(window).height() + $(window).scrollTop() + 100;

            if(scroll_position_for_posts_load >= $(document).height()){
                $.get(page, function(data){
                    $('.endless-pagination').data('next-page', data.next_page);
                    $('.posts').append(data.posts);
                });
            }
        }, 350))
    }
}
});

UPD: Here is page code

<section class="posts endless-pagination" data-next-page="{{ $posts->nextPageUrl() }}">
    @foreach($posts as $post)
        <tbody>
            <td>
                <a href="/posts/{{ $post-> id }}">
                    {{ $post -> subject }}
                </a>
            </td>
            <td>
                {{ $post -> body }}
            </td>
        </tbody>
    @endforeach
</section>