JSFiddle - React, Tailwind, and code Playground

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" class="btn btn-danger" value="101">Un Assigned</button>
    </div>
    <span class="btn_txt"></span>
</div>

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

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

<input type="text" name="arrButton">
<div class="btnLen"></div>

JavaScript

var arBtnLen=0
var tot=2
    
$('.xtestbtn').find('.btn').click(function(e) {
    $(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");
        
        if(arBtnLen=2){
            $(this).addClass("disabled");
        }
        
        
    }
    
    arrButton = [];
    $('.btn.active').each(function() {
        arrButton.push($(this).val());
    });
    $('[name=arrButton]').val(arrButton.join(","));
    arBtnLen= arrButton.length
    $('div.btnLen').html(arBtnLen);        
});