JSFiddle - React, Tailwind, and code Playground

HTML

<div id="key" class="r1" data-roomtype="room1">room1</div>
<div id="key" class="r2" data-roomtype="room one">room one</div>
<div id="key" class="r3" data-roomtype="room/">room /</div>

<div id="item" class="r1" data-roomtype="room1">Room1</div>
<div id="item" class="r2" data-roomtype="room one">room one</div>
<div id="item" class="r3" data-roomtype="room/">room/</div>

CSS

#key{ margin:10px; width:100px; height:20px; cursor:pointer;}
.r1{ background:red;}
.r2{ background:green;}
.r3{ background:orange;}

#item{margin:20px; width:150px; height:40px; opacity:0.5}

JavaScript

$('#key').live('click',function () {
                                   
if ($(this).css('opacity') == 1){
    $('div[data-roomtype="'+$(this).data('roomtype')+'"]').animate({opacity:0.1},100);
    }
if ($(this).css('opacity') != 1){
    $(this).animate({opacity:1},100);
    $('div[data-roomtype="'+$(this).data("roomtype")+'"]').not($(this)).animate({opacity:0.5},100);
    }
});