JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<table>
<tr><td><a href="#" class="showDetail" data-pqt="12345">12345</a></td><td>rest of the table cells here --></td></tr>
<tr><td><a href="#" class="showDetail" data-pqt="23456">23456</a></td><td>rest of the table cells here --></td></tr>
<tr><td><a href="#" class="showDetail" data-pqt="34567">34567</a></td><td>rest of the table cells here --></td></tr>
<tr><td><a href="#" class="showDetail" data-pqt="45678">45678</a></td><td>rest of the table cells here --></td></tr>
</table>

<div id="detail_12345" class="paqqetDetail">
<table>
<tr><td>Lorum Ipsum12345</td><td>Lorum Ipsum12345</td><td>Lorum Ipsum12345</td></tr>
</table>
</div>
<div id="detail_23456" class="paqqetDetail">
<table>
<tr><td>Lorum Ipsum23456</td><td>Lorum Ipsum23456</td><td>Lorum Ipsum23456</td></tr>
<tr><td>Lorum Ipsum23456</td><td>Lorum Ipsum23456</td><td>Lorum Ipsum23456</td></tr>
</table></div>
<div id="detail_34567" class="paqqetDetail">
<table>
<tr><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td></tr>
<tr><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td></tr>
<tr><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td><td>Lorum Ipsum34567</td></tr>
</table></div>
<div id="detail_45678" class="paqqetDetail">
<table>
<tr><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td></tr>
<tr><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td></tr>
<tr><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td></tr>
<tr><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td><td>Lorum Ipsum45678</td></tr>
</table></div>

JavaScript

$(function(){
        $('.paqqetDetail').hide();
        $('.showDetail').click(function(){
              $('.paqqetDetail').hide();
              $('#detail_'+$(this).attr('data-pqt')).show();
        });
});