JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div class="container">

	
	<div class="row">
		<div class="col-sm-12">
		<br>
			
			<div class="panel panel-primary" >
				<div class="panel-heading">
					<h3 class="panel-title" ><strong><i class="fa  fa-list-alt"></i>Kosmos Search</strong></h3>
				</div>
				<div class="panel-body">

					
					<form role="form">
					
				  	  
					  <div class="form-group">
					    <label for="search">Search Term:</label>
					    <input type="text" class="form-control" id="searchTerm" value="">
					  </div>

					  
					  <div class="form-group">
					    <label for="pwd">Number of Records to Retrieve:</label>
						<select class="form-control" id="numRecordsSelect">
							<option value=1>1</option>
							<option value=5 >5</option>
							<option value=10 selected>10</option>
						</select>			  
					  </div>

				  	  
			

					  
					  <button type="submit" class="btn btn-default" id="runSearch"><i class="fa fa-search"></i> Search</button>
  					  <button type="button" class="btn btn-default" id="clearAll"><i class="fa fa-trash"></i> Clear Results</button>

					</form>
				</div>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-sm-12">
		<br>

			
			<div class="panel panel-primary">

				
				<div class="panel-heading">
					<h3 class="panel-title"><strong><i class="fa fa-table"></i>Results</strong></h3>
				</div>

				
				<div class="panel-body" id="wellSection">
				</div>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-sm-12">
			
			
			<hr>
			

		</div>
	</div>

</div>


<script src="https://code.jquery.com/jquery.js"></script>
<script>
      var queryTerm = "";
			var numResults = 0;
			var Counter = 0;
			var queryURLBase="https://search-testdomain-y56yhnxcndddwuykob75fjvprq.us-east-1.es.amazonaws.com/enron/_search?pretty=&q=*";
		Counter = 0;

  

function runQuery(numResults, queryURL){

	$.ajax({url: queryURL, method: "GET"}) 
		.done(function(ElasticData)...