How to change the location of popup window/modal?

Question

I have 3 divs (each div have a popup window to display once the div is clicked) Right now, popup window is displaying related to the div selected, But not in particular location. current

The expected popup modal should be near the selected div like below expected

The CSS code so far

            .ui-selectee{
        position: relative;
        display: inline-block;
        border-right-style: solid;
        border-bottom-style: solid;
        border-top-style: solid;
        border-width: 0.1rem;
        border-color: #B2BABB;
        width: 4.1rem;
          max-width: 4.1rem;
          max-height: 2.3rem;
        height: 2.3rem;
        margin: 0;
        overflow: hidden;
        cursor: pointer;
      /*  white-space: nowrap; */ 
        }
        /* The actual popup window : reservation detail; */
        #ReservationBookedBlock, #ReservationBookedBlock1{ /*  visibility: hidden;  */
background-color: white;
color: black;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 125%;  
left: 50%;
margin-left: -80px;

            border: dotted; width:38rem; padding:1rem; 
            }  
            .ui-selectee .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;}
            /* The arrow of the popup */
        .ReservationBookedBlock_cssClass ::after{
            content: "";
            position: absolute;
            bottom: 100%;
            right: 50%;
            margin-left: -25px;
            margin-bottom: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}}@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}}

Related html markup (THe code is written in Salesforce visualforce)

            <script>
            // jQuery script
            // Get the modal
            var modal = document.getElementById('myModal');
            var resBooked=document.getElementById('ReservationBookedBlock');
         // Get the button that opens the modal
            var buttonCell = document.getElementsByClassName("ui-selectee");
            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];
            // When the user clicks the button, open the modal
            for (var i = 0; i < buttonCell.length; i++) {
                buttonCell[i].onclick = function() {
                    var cellNumber1 = $(this).attr('id');
                    //alert($(this).attr('id'));
                    var resNo=document.getElementById(cellNumber1).style.backgroundColor;
                    //alert(resNo);
                    //alert(resNo.length);
                    if(resNo == 'red' || resNo == 'green'){
                        //alert('Its already reserved');
                       // resBooked.style.display = "block";
                        //alert('document.getElementById(cellNumber1).innerHTML-->'+document.getElementById(cellNumber1).innerHTML);
                        ReservationBookedCallBack(document.getElementById(cellNumber1).innerHTML);
                        ui-selectee.classList.toggle('show');
                    }
                    else
                       modal.style.display = "block";

                    var id = $(this).attr("data-id").split(":");
                    console.log(id);
                    var roomName =  $(document.getElementById(id[0]+'')).text();
                    let currentDate = $('#datepicker-container').datepicker("getDate");;
                    var startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + - 1 + parseInt(id[1]));
                    console.log(roomName,startDate);
                    localStorage.setItem('roomName', roomName);
                    localStorage.setItem('startDate', startDate);
                    document.getElementById("roomname").value = roomName;
                    var strdt = startDate.getFullYear()+"-"+ startDate.getMonth()+"-"+ startDate.getDate()
                    document.getElementById("stdate").value = startDate;
                    //        alert('room name : '+roomName);
                    //alert('date : '+strdt );
                }
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }
            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
            </script>
        </div>

        <script>
        $(document).ready(function() {
            $("#datepicker-container").trigger('click');
            console.log(1);
        });</script></body><apex:actionFunction name="ReservationBookedCallBack" action="{!ReservationBooked}" reRender="ReservationBookedBlock1,ReservationBooked">
        <apex:param name="ReservationName" assignTo="{!ReservationName}" value="" /></apex:actionFunction>