ExampleCounterPluginCSS.css

#v-counter {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 16px;
}

.o-counter__display {
    flex: 1 0 auto;
    text-align: center;
    font-weight: bold;
}

.o-counter__minus,
.o-counter__plus {
    flex: 0 0 32px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    line-height: normal !important;
    box-sizing: border-box;
    border: 1px solid #000;
    color: #fff;
    margin: 0;
    padding: 0;
}

.o-counter__minus {
    background-color: #e61919;
}

.o-counter__plus {
    background-color: #00af33;
}

ExampleCounterPluginJS.js

(function() {
    var _plugin = null;

    var PLUGIN_ID = 'v_counter';
    var ELEMENT_ID = 'v-counter';
    var DEFAULT_COUNT = 0;

    function _init() {
        _definePbp();
        _buildPluginObject();
        _addPluginObjectToPbp();

        $(_onDocumentReady);
    }

    function _definePbp() {
        if (window.pbp === undefined) window.pbp = {};
    }

    function _buildPluginObject() {
        _plugin = _buildCounterActions();
    }

    function _buildCounterActions() {
        var data = _buildCounterData();

        var increment = incrementCount.bind(data);
        var decrement = decrementCount.bind(data);
        var getCount = getCurrentCount.bind(data);

        return {
            increment,
            decrement,
            getCount,
        };
    }

    function _buildCounterData() {
        return {
            count: DEFAULT_COUNT,
        };
    }
    
    function incrementCount() {
        this.count++;
        _updateCounter();
    }

    function decrementCount() {
        this.count--;
        _updateCounter();
    }

    function _updateCounter() {
        var count = _plugin.getCount();
        var formattedCount = pb.number.commify(count);

        var $counter = $('#' + ELEMENT_ID);
        var $display = $counter.children('.o-counter__display');

        $display.html(formattedCount);
    }

    function getCurrentCount() {
        return this.count;
    }

    function _addPluginObjectToPbp() {
        window.pbp[PLUGIN_ID] = _plugin;
    }

    function _onDocumentReady() {
        _addElementsToCounter();
        _bindCounterButtonEvents();
    }

    function _addElementsToCounter() {
        var $counter = $('#' + ELEMENT_ID);
        var counterDoesNotExist = !$counter.length;

        if (counterDoesNotExist) {
            $counter = _buildCounterElement();
        }

        var $display = _buildCounterNumberDisplayElement();
        var $minusButton = _buildCounterMinusButtonElement();
        var $plusButton = _buildCounterPlusButtonElement();
        
        $counter
            .empty()
            .append($minusButton, $display, $plusButton);
    }

    function _buildCounterElement() {
        var $counter = $('<div>').attr({
            id: ELEMENT_ID,
            class: 'o-counter',
        });

        $('#content').prepend($counter);

        return $counter;
    }

    function _buildCounterNumberDisplayElement() {
        return $('<div>')
            .addClass('o-counter__display')
            .html(DEFAULT_COUNT);
    }

    function _buildCounterMinusButtonElement() {
        return $('<button>')
            .addClass('o-counter__minus js-counter-subtract')
            .html('-');
    }

    function _buildCounterPlusButtonElement() {
        return $('<button>')
            .addClass('o-counter__plus js-counter-add')
            .html('+');
    }

    function _bindCounterButtonEvents() {
        $('.js-counter-add').on('click', _plugin.increment);
        $('.js-counter-subtract').on('click', _plugin.decrement);
    }

    _init();
})();