JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mTable" class="table table-hover table-bordered table-sieve"    >
      <thead><th >Name</th><th >Department</th></thead>

        <tbody>
        <cfloop query="Corporate"  >
        <cfoutput>
        <tr>

        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        <tr>

        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
            
        <tr>

        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        </cfoutput>
        </cfloop>

        </tbody>

 </table>
 <div id="output"></div>

CSS

#output {position: absolute;
    visibility: hidden;
    background-color: yellow;};

JavaScript

$(document).ready(function() {
         $('a.datalink').click(function () {
            //var StateName = $(this).prop("detail");
            var StateName = $(this).attr("detail");   
            $('#maintext').show();
            $('#output').html(StateName);
            $('#output').css('top',$(this).offset().top);
            $('#output').css('left',($(this).offset().left + parseInt($("#mTable").css('width'))));
            $("#output").css('visibility','visible');
        });

    });