JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listing">
  <table>
    <tr>
      <td><a href="#" class="toggle" data-target="details-1">Toggle 1</a></td>
      <td><a href="#" class="toggle" data-target="details-2">Toggle 2</a></td>
      <td><a href="#" class="toggle" data-target="details-3">Toggle 3</a></td>
      <td><a href="#" class="toggle" data-target="details-4">Toggle 4</a></td>
    </tr>
    <tr class="details">
      <td class="details-1" style="display: none">Toggle 1 details</td>
      <td class="details-2" style="display: none">Toggle 2 details</td>
      <td class="details-3" style="display: none">Toggle 3 details</td>
      <td class="details-4" style="display: none">Toggle 4 details</td>
    </tr>
  </table>
</div>

JavaScript

$(function()
{
	$('.toggle').on('click', function()
  {
  	var target = $(this).data('target');
    $('.'+target).toggle();
  });
});