JSFiddle - React, Tailwind, and code Playground

by hiteshbhilai2010

HTML

<div id="map_size" align="center">
    <div class= "desk_box" id='desk_box_84' style='position:absolute;left:20px;top:60px;'data = 84>id:84</div>
    <div class='station_info' id='station_info_84' style='position:absolute;left:80px;top:60px;'>
        Hello the id is:203</br>Section:Section C</br>
    

</div>

CSS

/*body*/
 body {
    margin:0px auto;
    width:80%;
    height:80%;
}
/*map size*/
 #map_size {
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
}
/* desk boxes*/
 .desk_box {
    width: 23px;
    height: 10px;
    border: 4px solid black;
    padding:10px;
}
/*station info*/
 .station_info {
    display: none;
    width:150px;
    height:150px;
    border:4px solid black;
    background-color:white;
}
#desk_box:hover ~ .station_info {
    display: block;
}

JavaScript

$(document).ready(function () {
    $(".desk_box").click(function () {
        alert($(this).attr("data"))
        $id = $(this).attr("data")
        $("#station_info_"+$id).toggle();
    });
});