JSFiddle - React, Tailwind, and code Playground

by Rational Rabbit

HTML

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MapContainer">
   <div class="Abr" style="top:100px; left:238px;"><span id="WA">WA</span></div>
   <div class="Abr" style="top:213px; left:207px;"><span id="OR">OR</span></div>
   <div class="Abr" style="top:315px; left:550px;"><span id="WY">WY</span></div>
   <div class="Abr" style="top:253px; left:365px;"><span id="ID">ID</span></div>
   <div class="Abr" style="top:153px; left:512px;"><span id="MT">MT</span></div>
</div>
<!-- Here, the query is used to pull data from tables
   Data  for states is held in a case structure. Where data exists, these will be defined.--> 
<script>$("#OR").addClass("Active");</script><Info id="ORInfo" data-title="Oregon" data-charges="125,363.40" data-weight="875,250 lbs" data-shipments="1011 Bills"></Info>
<script>$("#WY").addClass("Active");</script><Info id="WYInfo" data-title="Wyoming" data-charges="2,472.86" data-weight="80,000 lbs" data-shipments="159 Bills"></Info>

</body>

CSS

body {font-family:verdana;}
#MapContainer {
  position: fixed;
  width: 700px;
  height: 400px;
  top: 10px
  left: 10px;
  padding: 0;
  z-index: 1;
  border:2px solid black;
}

.Abr {
   z-index:100;
   position:fixed;
   font-size:18px;
   font-weight:bold;
   color:#006393;
}

.Abr .Active {
   z-index:300;
   background:red;
   padding:6px;
   color:white;
   border:2px solid black;
   border-radius:50%;
   cursor:pointer;
}

.AbrData {
  z-index:101;
  position:relative;
  top:10px;
  font-size:12px;
  background-color:#FFFFFF;
  color:#000000;
  max-height:100px;
  width:190px;
  overflow:auto;
  padding-bottom:10px;
  border:1px solid grey;
  border-radius: 15px;
}

.DataBox .Title{
   text-align:center;
   background-color:#E0E0E0;
   font-weight:bold;
   border-bottom:1px solid #000000;
   padding:3px 0;
   margin-bottom:5px;
}

.DataBox .Left {
   padding-left:5%;
   width:45%;
   display:inline-block;
   Text-align:right;
}

.DataBox .Right {
   padding-left:5%;
   padding-right:5%;
   text-align:right;
   font-weight:normal;
   width:40%;
   display:inline-block;
}

JavaScript

$(".Active").on("click", function ()
   {
      var AbrID = this.id;
      const Info = document.querySelector("#"+AbrID+"Info");
      var $this = $(this), $data = $this.next('.AbrData');
      if ($data.length == 0)
      {
         $data = $("<div class='AbrData'></div>").insertAfter($this);
         $data.append('<div class="DataBox"><div class="Title">'+Info.dataset.title+'</div><div class="Left">Charges:</div><div class="Right">$'+Info.dataset.charges+'</div><br /><div class="Left">Weight:</div><div class="Right">'+Info.dataset.weight+'</div><br /><div class="Left">Shipments:</div><div class="Right">'+Info.dataset.shipments+'</div></div>');
      }
      else
      {
         $data.toggle();
      }
   });