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="container"></div>
    <div id="FriendsStuff"></div>

JavaScript

<script type="text/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.
       ...