JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="votes">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
            <br />

<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br>

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>

CSS

.selected {
color:#16A085;
}
.not-selected {
    color:#333;
    }

JavaScript

$('.glyphicon').click(function(e){
  e.preventDefault();
        $(this).closest('.votes').find('.glyphicon').not(this).removeClass('selected').toggleClass('not-selected');
        $(this).removeClass('not-selected').toggleClass('selected');
    });