JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="tiles">
        <div class="buildings">
            <div class="tile building pos-one" id="a">
               <h1> A </h1>
            </div>
            <div class="tile building pos-two" id="b">
                <h1> B </h1>
            </div>
            <div class="tile building pos-three" id="c">
                <h1> C </h1>
            </div>
            <div class="tile building pos-four" id="d">
                <h1> D </h1>
            </div>
            <div class="tile building pos-five" id="e">
                <h1> E </h1>
            </div>
            <div class="tile total pos-six" id="total">
                <h1> Total </h1>
            </div>
         </div>
         <div class="rooms">          
             <div class="tile room pos-two a" id="a-1">
                 <h1> 1 </h1>
             </div>
             <div class="tile room pos-three a">
                 <h1> 2 </h1>
             </div>
             <div class="tile room pos-two b">
                 <h1> 3 </h1>
             </div>
             <div class="tile room pos-three b">
                 <h1> 4 </h1>
             </div>
             <div class="tile room pos-two c">
                 <h1> 5 </h1>
             </div>
             <div class="tile room pos-three c">
                 <h1> 6 </h1>
             </div>
             <div class="tile room pos-two d">
                 <h1> 7 </h1>
             </div>
             <div class="tile room pos-three d">
                 <h1> 8 </h1>
             </div>
             <div class="tile room pos-two e">
                 <h1> 9 </h1>
             </div>
             <div class="tile room pos-three e">
                 <h1> 10 </h1>
             </div>
        </div>
        <div class="backs">
            <div class="tile back pos-four a">
                 <h1> back </h1>
             </div>
             <div class="tile back pos-four b">
                 <h1> back </h1>
             </div>
    ...

CSS

.content {
padding-top:30px;
width:100%;
margin-left:auto;
margin-right:auto;
}

.tiles{
margin-left:auto;
margin-right:auto;
position:relative;
height:500px;
width:650px;
}

.tile {
position:absolute;
width:150px;
height:150px;    
}

.selected {
border-style:solid;
border-width:5px;
}

.buildings {
}

.building {
background:red;
}

.room {
background:blue;
}

.back {
background:green;
}

.total {
background:yellow;
}

.map {
position:absolute;
top: 179px;
left:0px;
}

.pos-one {
top:0;
left:75px;
}

.pos-two {
top:0;
left:244px;
}

.pos-three {
top:0;
left:413px;
}

.pos-four {
top:169px;
left:75px;
}

.pos-five {
top:169px;
left:244px;
}

.pos-six {
top:169px;
left:413px;
}

JavaScript

$(".room").hide();
$(".back").hide();
$(".map").hide();

var x_axis=0;
var y_axis=0;

$(".building").click(function () {
    if ($(':animated').length) {
        alert("animating");
        return false;
    }
    
    $building = $(this);
    
    x_axis = $building.css("left");
    y_axis = $building.css("top");
    
    $building.addClass("selected");
    $buildingId = $building.attr("id");
    
    $building.siblings().hide(1000, function () {
        $building.animate({top:"0px", left:"75px"}, 1000, function () {
            $building.parent().siblings(".rooms").children("."+$buildingId).show(1000);
            $building.parent().siblings(".backs").children("."+$buildingId).show(1000);
        });
    });
});

$(".back").click(function() {
    if ($(':animated').length) {
        alert("animating");
       return false;
   }
    
   $back = $(this);
   $buildingName = belongsTo($back);
   $building = $("*").find("#"+$buildingName);
   $building.removeClass("selected");
   $buildingId = $building.attr("id"); 
    
   $(this).hide(1000);
    $building.parent().siblings(".rooms").children("."+$buildingId).hide(1000, function() {
        $building.animate({left: x_axis, top: y_axis }, 1000, function() {
            $building.siblings().show(1000);
        });
    });
});
                 
function belongsTo($div){
    if ($div.hasClass("a")) {
        return "a";
    } else if ($div.hasClass("b")) {
        return "b";
    } else if ($div.hasClass("c")) {
        return "c";
    } else if ($div.hasClass("d")) {
        return "d";
    } else if ($div.hasClass("e")) {
        return "e";
    } else if ($div.hasClass("")) {
        return "f";
    } else {
        return "no building";
    }
}