Add Ajax loaded posts to existing posts

The jQuery .html and .load() is replacing the entire content.

First, move your #Pagination outside of the ul.list-group. You will want this to continue to remain at the bottom of the list.

Next, you will need to reconfigure your jQuery ajax to load the posts differently. You should load the posts from the next page, and append them to the list.

Untested, but something along these lines should work.

jQuery('#Pagination a').on('click', function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
    var loading = jQuery('Loading');
    jQuery('.list-group').append(loading);
    $.ajax({
        url: link,
        success: function(data) {
            var newPosts = data.find('#contentInner .list-group').html();
            $('#contentInner .list-group').append(newPosts);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
            $('#loading').text("Error loading posts");
        }
    });
});

You might also consider changing the way the pagination works. Is it number pagination? or just Prev/Next?

You can change the href on your pagination links by using the data.find in the success function to grab the href of the paginations on that page.
Either way, this seems like it is going to present some UX problems once you get it working and start playing with it.

error code: 523