JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tally"></div>

CSS

#tally {
    cursor: pointer;
    width:100%; height:auto;
}

JavaScript

$.fn.tallier = function () {
    var $this = this,
        bgUrl = 'http://i.stack.imgur.com/96hvp.png',
        bgHeight = 125,
        bgVals = [
            [45, 25],
            [65, -35],
            [85, -115],
            [105, -215],
            [140, -360]
        ],
        count = 0;
    
    $this.click(function(e) {
        count++;
        if (count%5 == 1) {
            var $newTally = $('<div>').addClass('tally');
            $newTally.css({
                          background: 'url("' + bgUrl + '") ' +
                            bgVals[0][1] + 'px 0 no-repeat transparent',
                          float: 'left',
                          width: bgVals[0][0] + 'px',
                          height: bgHeight + 'px'
                      });
            $this.append($newTally);
        }
        var $lastTally = $this.find('.tally:last'),
            i = count%5 - 1;
        i = i < 0 ? 4 : i;
        $lastTally.css({
            'background-position': bgVals[i][1] + 'px 0',
            width: bgVals[i][0] + 'px'
        });
    });
};

$('#tally').tallier();
$('#tally').click();