JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="row">
    <button id="dateMenu" class="span2 btn menu">Date</button>
    <button id="jcMenu" class="active span3 btn menu">Job Category</button>
    <button id="jpMenu" class="span2 btn menu">Job Priority</button>
    <button id="wsMenu" class="span3 btn menu">Workflow Status</button>
    <button class="span1 btn custom"> <i class="icon-arrow-left"></i>

    </button>
    <button id="refresh" class="span1 btn custom"> <i class="icon-refresh"></i>

    </button>
</div>

CSS

.btn {
    color:white;
    background:none;
    background-color:#B3B3B3;
    border-radius:0;
    text-shadow:none;
}
.btn:hover {
    background-color:#29ABE2;
    color:white;
}
.custom {
    background:none;
}
.active{
    background-color:#29ABE2;
}

JavaScript

$(document).ready(function () {
    $('.menu').click(function () {
        if (!$(this).hasClass('active')) {
            $(this).addClass('active')
                   
                   .removeClass('active');
        }
    });    
});