title: How to display div next to table row?
body: <p>I have a table that is displaying data from a query.</p>
  
  <p>Right now when i click on the #emp_namefirst# it shows me the #emp_cell# but it display it
  on the bottom of the table. </p>
  
  <p>How can i display the div next to the table row that i click on the #emp_namefirst#? </p>
  
  <pre><code>&lt;script language="JavaScript"&gt;
    $(document).ready(function() {
           $('a').click(function () {
           //var StateName = $(this).prop("detail");
              var StateName = $(this).attr("detail");   
              $('#maintext').show();
              $('#output').html(StateName);
  
          });
  
      });
  &lt;/script&gt;
       &lt;table   class="table table-hover table-bordered table-sieve"    &gt;
        &lt;thead&gt;&lt;th &gt;Name&lt;/th&gt;&lt;th &gt;Department&lt;/th&gt;&lt;/thead&gt;
  
          &lt;tbody&gt;
          &lt;cfloop query="Corporate"  &gt;
          &lt;cfoutput&gt;
          &lt;tr&gt;
  
          &lt;td &gt;&lt;span style="cursor:default"&gt;&lt;a  id="showdata"  detail="Cell: #emp_cell# "&gt;    #emp_namefirst#&lt;/td&gt;
          &lt;td &gt;#dept_name# &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/cfoutput&gt;
          &lt;/cfloop&gt;
  
          &lt;/tbody&gt;
  
   &lt;/table&gt;
   &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>