JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>title</title>
	<link rel="stylesheet" href="themes/bboy.min.css" />
	<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" href="js/jquery.mobile.structure-1.4.5.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/app.js"></script>
   
</head>
<body>
 	<script type='text/javascript'>
	loadData(1);
	</script>
	<div data-role="page" data-theme="a">
		<div data-role="header" data-position="inline">
		<form class="ui-filterable" style="margin-right:10px; margin-left:10px;">
    	<input id="filterBasic-inputEvents" data-type="search" data-mini="true" >
		</form>
		</div>
        
		<div data-role="content" data-theme="a">
		       
        <ul id="listv" data-role="listview" data-filter="true" data-input="#filterBasic-inputEvents">

		</ul>
           
		</div>
        
          <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="checkbY" class="ui-btn-active ui-state-persist">Events</a></li>
        <li><a href="news.html" data-icon="globe">News</a></li>
        <li><a href="crews.html" data-icon="userb">Crews</a></li>
        <li><a href="lessons.html" data-icon="teach">Lessons</a></li>
        <li><a href="contact.html" data-icon="compose">Contact</a></li>
      </ul>
    </div>
  </div>
	</div>
</body>
</html>

JavaScript

//$(document).ready(function() {

var db;

function loadData(pg_id) {
$.ajax({ 
		url: "http://www.aquintable.com/bboyjams/pick.php", 
		type: "post", 
		data: {page_id: pg_id }, 
		success: function(data) { 

		db = $.parseJSON(data);
		if(pg_id == 1){ //EVENTS
			parseEvents();
		}
		else if(pg_id == 3) {
			parseCrews();
		}
		else if(pg_id == 4) {
			parseLessons();
		}
	 }, 
	 error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
	}
});
}

function parseEvents(){
	for (var i = 0, len = db.length; i < len; i++) {
	  var str="";
	  str += '<li><a href="#"><h1>';
	  str += db[i].name;
	  str += '</h1><p>';
	  str += db[i].date;
	  str += '</p></a></li>';
	  $('#listv').append(str);
  }
  $("#listv").listview("refresh");
}

function parseCrews() {
	for (var i = 0, len = db.length; i < len; i++) {
	  var str="";
	  str += '<li><a href="#"><h1>';
	  str += db[i].name;
	  str += '</h1><p>';
	  str += db[i].location;
	  str += '</p></a></li>';
	  $('#listv').append(str);
  }
  $("#listv").listview("refresh");
}

function parseLessons() {
	for (var i = 0, len = db.length; i < len; i++) {
	  var str="";
	  str += '<li><a href="#"><h1>';
	  str += db[i].location;
	  str += '</h1><p>';
	  str += db[i].instructor;
	  str += '</p><p>';
	  str += db[i].level;
	  str += '</p></a></li>';
	  $('#listv').append(str);
  }
  $("#listv").listview("refresh");
}

function loadData2()
{
	alert('out');
}

//});