JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>
<div id="divParent2" class="parentDiv">
    Group 2
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

CSS

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.selected {
  background-color: #ff0000;
}

JavaScript

$('.childDiv').click(function(){
  $(this).parent().find('.childDiv').not(this).removeClass('selected');
  $(this).toggleClass('selected');
});