When to hide show more button
Here is what I did in my blog index: 

        {% paginate craft.entries.section('blog').limit(1) as pageInfo, blogEntries %}

        &lt;div id="post-output"&gt;

            {% for entry in blogEntries %}
                &lt;article&gt;
                    &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
                    &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
                    &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                &lt;/article&gt;
            {% endfor %}

        &lt;/div&gt;

        {% set numOfpages = pageInfo.totalPages %}

        &lt;button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="1" data-total="{{ numOfpages}}"&gt;Load More&lt;/button&gt;


and in my javascript: 

$("#more-button").on('click', function () {
var btn = $(this),
    page = btn.data('page'),
    batch = btn.data('batch'),
    total = btn.data('total'),
    offset = page * batch,
    newPage = page + 1;

console.log(newPage);
console.log(total);

if ( newPage &lt;= total ) {

    loadPosts(offset, batch);
    // set the buttons page attribute to the new page it is on.
    btn.data('page',newPage);
}

if ( newPage == total ) {
    $('#more-button').hide();
}

});

function loadPosts (offset, limit) {
$.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
    var postOutput = $('#post-output');
    postOutput.append(data);
});
}