JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="vote-container" data-original-score="0">
  <button class="up_arrow up"></button>
  <span class="count">0</span>
  <button class="down_arrow down active"></button>
</div>

<div class="vote-container" data-original-score="1">
  <button class="up_arrow up"></button>
  <span class="count">1</span>
  <button class="down_arrow down"></button>
</div>
<div class="vote-container" data-original-score="29">
  <button class="up_arrow up active"></button>
  <span class="count">29</span>
  <button class="down_arrow down"></button>
</div>

CSS

button {
    cursor: pointer;
    border: none;
    padding:5px;
}
.up_arrow {
      background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll -18px 0;
  height: 13px;
  width: 18px;
}
.down_arrow {
  background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll -18px -14px;
  height: 13px;
  width: 18px;
}
.up.active, .up:hover {
background-position: 0 0;
}

.down.active, .down:hover {
background-position: 0 -14px }

.vote-container {
    width: 20px;
    margin:10px auto;
    text-align:center;
}

JavaScript

$(function() {

    $('button').click(function(e) {

        e.preventDefault();

        var $this = $(this),
            $container = $(this).closest('.vote-container'),
            $buttons = $container.children('button'),
            $count = $container.children('.count'),
            votes = parseInt($count.text()),
            originalScore = $container.data('original-score'),
            delta = ($this.hasClass('up')) ? 1 : -1;

        if ($this.hasClass('active')) {
            $this.toggleClass('active');
            $count.text(originalScore);
        } else {
            if ($buttons.filter('.active').length) {
                $buttons.toggleClass('active');
                if (originalScore + delta < 0) {
                    $count.text(votes + delta);
                    return false;
                }
            } else {
                if (originalScore + delta < 0) {
                    $this.toggleClass('active');
                    return false;
                }
                $this.toggleClass('active');
            }
            $count.text(originalScore + delta);
        }

    });

});