JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<script src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="error" style="display:none"></div>
<input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" />
<button id="find_button" type="button" class="btn btn-login">Find</button>
<div id="imgs"></div>
<div id="username"></div>
<div class="container"></div>
<div id="FriendsStuff"></div>
<div id="FriendsStuffName"></div>

JavaScript

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

// capture name of user thats been clicked
// return their activty feed of badges etc

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

var query = new Parse.Query(FriendRequest);
query.include('toUser');
// query.include('fromUser');
//query.include('pic');
query.equalTo("fromUser", currentUser);
query.equalTo("status", "Request sent");

query.find({
    success: function (results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        Username = [];
        for (var i = 0; i < results.length; i++) {
            var object = results[i].get("toUser");
            imageURLs.push(object.get("pic"));
            Username.push(object.get("username"));
        }


        // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
        console.log(imageURLs);
        console.log(Username);
        for (var j = 0; j < imageURLs.length; j++) {
            $('#container').append("<img class='images' src='" + imageURLs[j] + "'/>");
            $('#container').append("<div class='username'>'" + Username[j] + "'</div>");
        }

    },
    error: function (error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
    }

});


var currentUser = Parse.User.current();
var myBadges = Parse.Object.extend("myBadges");


// Captures the input from the user and checks if the name already exists within the Db.
function friendFeed(name) {
    var friendName = name || $('#friendsearch').val();
    console.log(friendName);
    // var query = new Parse.Query(myBadges);
    var query = new Parse.Query(myBadges).matchesQuery("uploadedBy", new Parse.Query("_User").equalTo("username", friendName));
    query.find({
        success: function (rules) {

  ...