JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<input type="text" maxlength="100" name="searchBean.keyword" class="SearchInput" id="tags" />

CSS

.ui-autocomplete {
    max-height: 180px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    
}

JavaScript

$(function() 
{
	var availableTags = 
	[
		"Abraham Lincoln -email",
		"Andrew Jackson -email",
		"Bill Clinton -cell",
		"Barack Obama -cell",
		"George Bush -cell",
		"George Washington -email",
		"Grover Cleveland -email",
		"Harry Truman -cell",
		"Thomas Jefferson -email",
		"Zachary Taylor -email",
		"Harry1 Truman -cell",
		"Harry2 Truman -cell",
		"Harry3 Truman -cell",
		"Harry4 Truman -cell",
		"Harry5 Truman -cell",
		"Harry6 Truman -cell",
		"Harry7 Truman -cell",
		"Harry8 Truman -cell",
		"Harry9 Truman -cell",
		"Harry10 Truman -cell",
		"Harry11 Truman -cell",
		"Harry12 Truman -cell",
		"Harry13 Truman -cell",
		"Harry14 Truman -cell",
		"Harry15 Truman -cell",
		"Harry16 Truman -cell"
		 
	];
	
		$( "#tags" ).autocomplete
		(
		
		{ 
			   source: availableTags, minLength: 0,
				 
				 
				 select: function( event, ui ) 
					{
						if  ( ui.item.label == 'Add recipient')
						{
							hide('frequencyrow1');hide('frequencyrow2');
						}
						
						else if ( ui.item.label == 'George Bush -cell')
						{
								var firstValue = $('#from-account').val();
								
								if ( firstValue == '1' )
								{
									document.getElementById("continuebtn").innerHTML="<span>Calculate fees & taxes</span>";	
									hide('business1');show('currency1');show('currency2'); show('purposerow');
									hide('frequencyrow1');hide('frequencyrow2');
								}
								
								if ( firstValue == '2' )
								{	 
									document.getElementById("continuebtn").innerHTML="<span>Calculate fees & taxes</span>";	
									show('business1');show('currency1');show('currency2'); show('purposerow');
									hide('frequencyrow1');hide('frequencyrow2');
								}
							
						}
						
						else
						{
							
								var firstValue = $('#from-account').val();
							
								if ( firstValue == '1' )
								{
									document.getElementById("continuebtn").innerHTML="<span>Calculate fees &...