JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divforhistoricresults" class="classhistoricaldataresults">
   <div class="list-container-2">
      <ul class="tabs-2 clearfix">
         <li class='default'><a data-href="#one">Data</a></li>
          <li><a data-href="#two">Chart</a></li>
      </ul>
   </div>
   <div class="tab-container-2">
      <table id="one" class="tab-content-1 table table-striped">  
      </table>
      <table id="two" class="tab-content-1 table table-striped">                        
      </table>
   </div>
</div>

CSS

li a:hover {
  cursor:pointer;   
}

JavaScript

$("ul.tabs-2 li").click(function(e)
{
    e.preventDefault();
	var tabclicked = $(this).find("a").attr("data-href");
	if (tabclicked === '#one')
	{
		var onehtml = '<thead><th>ONE</th>';
		$("#one").show().html(onehtml);
        $("#two").hide();
	}
	else if (tabclicked === '#two')
	{
		var twohtml = '<thead><th>TWO</th>';
		$("#two").show().html(twohtml);
        $("#one").hide();
	}
});

$('ul.tabs-2 li:eq(0)').click();