JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" id="detailsTab">
  <thead>
        <th id="description" >Description</th>
        <th id="rules">House Rules</th>
        <th id="amenities">Amenities</th>
 </thead>
</table>
<div id="detailsDiv">
     <!-- first table -->
     <table  width="100%" border="1"  class="description"  style="display:none">
     <tr> 
        <td>
           Here is description
        </td>
    </tr>
    </table>
 <!-- second table -->
    <table  width="100%" border="2"  class="rules"  style="display:none">
     <tr>
        <td>
           Here is Rules
        </td>
    </tr>
    </table>
     <!-- third table -->
    <table  width="100%" border="3"  class="Amenities"  style="display:none">
     <tr>
        <td>
           Here is Amenities
        </td>
    </tr>
    </table>    
</div>

JavaScript

$('#detailsTab th').live('click', function(){
            var thisvalue = $(this).attr('id');
            alert(thisvalue );
            $('#detailsDiv > table').hasClass(''+thisvalue +'').show();
});