JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
function showonlyone(thechosenone, aElement) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).delay(200).fadeIn(500);
          }
          else {
               $(this).fadeOut(100);
          }
    });
    
}

</script>


<body>






<table width="100" border="0">

  <tr>
    <td><a href="javascript:showonlyone('newboxes1');">PointAa</a></td>
    <td><div class="newboxes" id="newboxes1" style="display: none;"><a href="javascript:showonlyone('newboxes3');">OptionA1</a></div>
        <div class="newboxes" id="newboxes2" style="display: none;"><a href="javascript:showonlyone('newboxes4');">OptionB1</a></div></td>
    <td><div class="newboxes" id="newboxes3" style="display: none;">OptionA5</div>
        <div class="newboxes" id="newboxes4" style="display: none;">OptionB5</div></td>
  </tr>
  <tr>
    <td><a href="javascript:showonlyone('newboxes2');">PointB</a></td>
    <td><div class="newboxes" id="newboxes1" style="display: none;"><a href="javascript:showonlyone('newboxes3');">OptionA2</a></div>
        <div class="newboxes" id="newboxes2" style="display: none;"><a href="javascript:showonlyone('newboxes4');">OptionB2</a></div></td>
    <td><div class="newboxes" id="newboxes3" style="display: none;">OptionA6</div>
        <div class="newboxes" id="newboxes4" style="display: none;">OptionB6</div></td>
  </tr>
  <tr>
    <td><br /></td>
    <td><div class="newboxes" id="newboxes1" style="display: none;"><a href="javascript:showonlyone('newboxes3');">OptionA3</a></div>
        <div class="newboxes" id="newboxes2" style="display: none;"><a href="javascript:showonlyone('newboxes4');">OptionB3</a></div></td>
    <td><div class="newboxes" id="newboxes3" style="display: none;">OptionA7</div>
        <div class="newboxes" id="newboxes4" style="display: none;">OptionB7</div></td>
  </tr>
  <tr>
    <td><br /></td>
    <td><div class="newboxes" id="newboxes1"...