JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<button id="load-more">hey</button>

JavaScript

var loader = {
    init: function() {
        this.cacheElements();
        this.bindEvents();
    },

    cacheElements: function() {
        this.feed = $('#feed');
        this.button = $('#load-more');
        this.href = button.attr('href');
    },

    bindEvents: function() {
        var that = this;
        this.button.click(that.loadData);
    },

    loadData: function() {
        this.message(this.button, 'loading');
        this.el = this.createNewEl();
        this.el.load(this.href + ' #feed', this.appendData(this.el));
    },

    createNewEl: function() {
        return $('<div />');
    },

    createNewUrl: function(page) {
        this.href = this.href.split('?')[0] + '?page=' + page;
    },

    incrementPageNo: function() {
        var page = this.href.match(/(\?|&)page=([0-9]+)(&|$)/i)[2];
        page = parseInt(page, 10) + 1;
        this.createNewUrl(page);
    },

    appendData: function(el) {
        this.feed.append(el.html());
        this.button.attr('href', this.href);
        this.message(this.button, 'load more');
        this.incrementPageNo();
    },

    message: function(el, msg) {
        el.html(msg);
    }

}

$(function() {
    loader.init();
});