JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div class = "btn-group">
    <button class = "btn">1</button>
    <button class = "btn">2</button>
    <button class = "btn">3</button>
</div>

CSS

.active{ background-color:blue; }
.focus{ color:white;font-size:3em; }

JavaScript

/* What Bootstrap does (essentially) */
$("body").on('click','.btn',function(){
    $(this).addClass('active');
});


/* What you can do */
$ref = $(".btn-group");

$("body").on('click',$ref.selector+' .btn',function(){
    if($(this).hasClass('active')){
        $(this).addClass('focus')
    }
});