JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<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();
});


function displayItems()
{
	var job = document.getElementById('joblist').value;
	var issued = "";
	
    //Both of these methods work, but only inside the function
	$("#lineitems").bind("tabsactivate", function(event, ui) {
		issued = ui.newTab.index();
		alert(issued);
	}); 
	
	$("#lineitems").tabs({
	  beforeActivate: function (event, ui) {
		//issued = ui.newPanel.attr('id'); //Get newly selected tab
		//alert(issued);
	  }
	});

	//alert(issued);
	//lineItems(job, issued); call to Ajax function
}