JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shikhar">
    <div class="a">Superman</div>
    <div class="b">Hulk</div>
</div>
<div class="shikhar">
    <div class="a">Spiderman</div>
    <div class="b">Batman</div>
</div>

CSS

.selected {
    color:red;
}
.highlight {
    background:yellow;
}

JavaScript

$(document).ready(function () {

    $('.shikhar > div').click(function (e) {
        $this = $(this);
        $parent = $this.parent(); // just to prevent so much jquery object creation
        var decide;
        if ($this.hasClass('a')) {
            decide = 'a';
        } else if ($this.hasClass('b')) {
            decide = 'b';
        }
        console.log(decide);

        if (decide == 'a') {
            $parent.find('.b').removeClass("highlight").addClass("selected");
            $parent.find('.a').removeClass("selected").addClass("highlight");
        } else {
            $parent.find('.a').removeClass("highlight").addClass("selected");
            $parent.find('.b').removeClass("selected").addClass("highlight");
        }
    });
});