JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<script src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>
			<div id="friendsfilter">
				<form id="friendsfilter">
					<div class="error" style="display:none"></div>

					<div class="form-group">
						<div class="input-group input-group-hg input-group-rounded">
							<span class="input-group-btn">
									<button id="find_button" type="button" class="btn"><span class="fui-search"></span>
							</button>
							</span>
							<input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
						</div>
					</div>


<div class="container">

			<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->

		

				<img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image singleImg">

				<div id="userimgs"></div>
</div>

JavaScript

Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");

////logs user in/////////
Parse.User.logIn("dave", "Williams", {
    success: function (user) {
        console.log("Logged in!");
    }
})


/////1:Use filter box to find friends example search for 'dave' or 'sally'//////

		var friendName;
		var FriendRequest = Parse.Object.extend("FriendRequest");
		var requestFriend = new FriendRequest();
		var currentUser = Parse.User.current();




		 // Captures the input from the user and checks if the name already exists within the Db.
		function findFriend() {

			friendName = $('#friendsearch').val();
			console.log(friendName);
			var query = new Parse.Query(Parse.User);
			query.equalTo("username", friendName); // find users that match
			query.find({
				success: function(friendMatches) {


					// This section is always run, no matter the outcome. Depending on the input depends on which result is shown
					if (friendMatches.length === 0)

					$('#no_user').show(),
					$('#userimgs').empty();

					//console.log('NO MATCH FOUND!!!')

					else // Query executed with success

						$('#no_user').empty();
					imageURLs = [];
					for (var i = 0; i < friendMatches.length; i++) {
						var object = friendMatches[i];
						imageURLs.push(object.get('pic'));
					}
					// If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
					for (var j = 0; j < imageURLs.length; j++) {
						$('#no_user').hide();
						$('#userimgs').empty();
						$('#userimgs').append('<img class="images BadgeImgOutline responsive-image"  src="' + imageURLs + '" />');


						//When user clicks the image, this fires and runs the function Friendrequest
						$('#userimgs').click(function() {

							Friendrequest();
							//$('#userimgs').empty();
						});



					}
					console.log('Done');
				},
				error: function(error) {
					alert('Opps we have a problem' +...