JSFiddle - React, Tailwind, and code Playground

by Fernando Santos

HTML

<div class="row-fluid">

        <div class="col-md-1"></div>

        <div class="col-md-2">
            <div class="circle" id="circle_1">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 2" id="circle_2">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 3" id="circle_3">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 4" id="circle_4">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 5" id="circle_5">

            </div>
        </div>

        <div class="col-md-1"></div>

    </div>

CSS

/* CSS used here will be applied after bootstrap.css */


.circle-selected{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #ff0000;
    cursor: pointer;
}

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #949494;

    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
    font-family: 'Corbel Bold';
    /* width and height can be anything, as long as they're equal */
}

.circle:hover{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #ffffff;
    cursor: pointer;
}

JavaScript

$(".circle").click(function(){
        
       var ID = $.trim($(this).attr('class').replace('circle-selected', '').replace('circle', ''));
        

        $("#circle_" + ID).toggleClass('circle').toggleClass('circle-selected');
        alert(ID);
});

$(".circle-selected").click(function(){
     var ID = $(this).attr('class').replace('circle-selected ', '');
     //alert('called 2');
});