JSFiddle - React, Tailwind, and code Playground

by Jeremy Bolanos

HTML

<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
<br />
<div id="carButtons">
    <button class="btn btn-small" data-car="volvo" data-loc="foreign">Volvo</button>
    <button class="btn btn-small" data-car="audi" data-loc="foreign">Audi</button>
    <button class="btn btn-small" data-car="saturn" data-loc="domestic">Saturn</button>
    <button class="btn btn-small" data-car="pontiac" data-loc="domestic">Pontiac</button>
</div>
<br />
<div id="actionButtons">
    <button class="btn btn-small disabled" data-type="foreign">Foreign</button>
    <button class="btn btn-small disabled" data-type="domestic">Domestic</button>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.btn:focus {
	outline: 0;
}

JavaScript

var setCar = function(){
    var vendors = carTypes();
}
var carTypes = function(){
    var cars = [];
    $('#carButtons button').click(function(e){
        e.preventDefault();
        var thisLoc = $(this).data('loc');
        if($(this).hasClass('btn-primary')){
            $(this).removeClass('btn-primary');
            if($('#carButtons button.btn-primary[data-loc="'+thisLoc+'"]')){
                
            }
            if($.inArray(thisLoc, cars) === -1)
        $(this).addClass('btn-primary');
        if($.inArray(thisLoc,cars) === -1){ cars.push(thisLoc); }
    });
}

setCar();