JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<div id="lineitems">
  <ul>
    <li><a href="#not-issued" onclick="displayItems()">Not Issued</a></li>
    <li><a href="#issued" onclick="displayItems()">Issued</a></li>
    <li><a href="#search" onclick="displayItems()">Search</a></li>
      
  </ul>

<div id="not-issued">Not Issued Items</div>
<div id="issued">Issued Items</div>
<div id="search">Search for items</div>

</div>

JavaScript

$(function() { //This is in the <head> tag on my HTML
    $( "#lineitems" ).tabs();
    
    //Both of these methods work, but only inside the function
	$("#lineitems").bind("tabsactivate", function(event, ui) {
		issued = ui.newTab.index();
		alert("bind "+issued);
	}); 
	
	$("#lineitems").tabs({
	  beforeActivate: function (event, ui) {
		issued = ui.newPanel.attr('id'); //Get newly selected tab
		alert("tabs "+issued);
          displayItems(issued);
	  }
	});

});

    function displayItems(issued)
{
    /*var job = document.getElementById('joblist').value;*/
	//var issued = "";
	
    
	alert("display "+issued);
	//lineItems(job, issued); call to Ajax function
}