JSFiddle - React, Tailwind, and code Playground

by hurricaneankit

HTML

<div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="firstFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv" id="groundDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="groundFloor"/>
            </div>
            </div>

CSS

.blockDiv {   
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}

.inactiveDiv {
    background: #0000FF;
}

.activeDiv, #groundDiv{
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
}

JavaScript

$('.container input').change(function(){
    if (this.checked){
            
           $(".blockDiv > div").removeClass("activeDiv");
           $('.blockDiv > div').removeAttr('id');
           $(this).closest('.container').find('.blockDiv .inactiveDiv').addClass("activeDiv");
    }
    });