When to hide show more button I am use a load more button in place of pagination. I just using jquery and ajax using this post as a starting point.

The problem I'm having is how to hide the button when there is no more posts to show. I thought I could do this with pagination but its not working out.  

Here is my blog index:

            {% paginate craft.entries.section('blog').limit(2) 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;

        {% if pageInfo.nextUrl %}

            &lt;button id="more-button" data-page="{{craft.request.getPageNum()}}" data-batch="2"&gt;Load More&lt;/button&gt;

        {% endif %}


Here is my javascript:

import $ from 'jquery';

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

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

console.log('page');
console.log(newPage);
});

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


and here is the ajax/_posts:

{% set offset = craft.app.request.getParam('offset') %}
{% set limit = craft.app.request.getParam('limit') %}
{% set moreitems = craft.entries.section('blog').limit(limit).offset(offset).all() %}

{% for entry in moreitems %}
&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 %}
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);
});
}