JSFiddle - React, Tailwind, and code Playground

HTML

<table   class="tablecolors">
      <thead><th scope="col">Name</th><th scope="col">Ext:</th><th scope="col">Title </th></thead>
		<tbody>
		<cfloop query="Corporate"  >
		<cfoutput>
		<tr>
		<td ><a  id="showdata"  detail="Cell:<cfif  #Corporate.emp_cell# eq ""> No Number<cfelse>#Corporate.emp_cell# </cfif> 
		<br/><cfif #Corporate.emp_bilingual# eq 1>  Bilingual:Yes<cfelse>Bilingual:No </cfif>">
		#Corporate.emp_namefirst# #Corporate.emp_namelast#   	
		<td ><div align="center">#Corporate.emp_ext#</div></td>
	
		<td > <cfif #Corporate.title_id# is not 19>#Corporate.title_name#</cfif> </td>

		</tr>
		</cfoutput>
		</cfloop>
			
		</tbody>
    </table>
            
            	<h2 id="maintext" style="display: none;">Here We will Display </h2>
		<div id="output"></div>

JavaScript

$(document).ready(function() {

         $('a').click(function () {
		    var StateName = $(this).attr("detail");

		    $('#maintext').show();
		    $('#output').html(StateName);
		});

    });