JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<script src="http://jsfiddle.net/5cYkk/2/src=%22http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="xtestbtn">
    <div class="">
        <button id="x101" data-toggle="button" class="btn btn-danger" value="101">Un Assigned</button>
    </div>
    <span class="btn_txt"></span>
</div>

<div class="xtestbtn">
    <div class="">
        <button id="x102" data-toggle="button" class="btn btn-danger" value="102">Un Assigned</button>
    </div>
    <span class="btn_txt"></span>
</div>

<div class="xtestbtn">
    <div class="">
        <button id="x103" data-toggle="button" class="btn btn-danger" value="103">Un Assigned</button>
    </div>
    <span class="btn_txt"></span>
</div>

<input type="text" name="arrButton">

JavaScript

$('.xtestbtn').find('.btn').click(function() {
    $(this).toggleClass('active');
    if( $(this).hasClass('active') ) {
        $(this).html(" Assigned").removeClass("btn-danger").addClass("btn-success");
    } else {
        $(this).html("Un Assigned").removeClass("btn-success").addClass("btn-danger");
    };
    
    arrButton = [];
    $('.btn.active').each(function() {
        arrButton.push($(this).val());
    });
    $('[name=arrButton]').val(arrButton.join(","));
});