else if pagination issue

I have a page that will show 8 posts at a time. I grouped them into groups of 4. When the user wants to read the 2nd pair of 4 posts, they will need to click on the 'load more' button and the 2nd group of 4 post will show.

Now the issue I'm having is going back having the same situation happen when the user clicks on the the other paginated pages. After clicking 'load more', all the posts in the other paginated pages show 8 posts.

So I wrote this code, however, the else statement is not being read.

This is the code I wrote trying to do exactly what I'm saying:

$('#ysports-news').on('click', '.pager-list-262 span.pager', function(){
  if ($(this).hasClass('active')) {
    console.log('this is sparta');
  } else {
    console.log('May the force be with you');
    $('.postGroups:odd').addClass('kc-hidden');
    $('.ys-pgrid img').removeClass('kc-hidden');
  }
});

The current paginated page has the class .active, and all the paginations are span within .pager-list-262 with the class .pager.

What I'm trying to achieve is, when I click on 'load more' show the last 4 posts, then hide the 'load more' button. When I click on a different page, hide the last 4 posts(odd groups) and show the load more button again.

console.log('this is sparta') works fine, but the else statement is not being read. Is it a problem with my syntax?

Any help will be appreciated. Thank you in advance.