JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<div id="container"></div>

CSS

<style media="screen" type="text/css">
        .fakeImage {
            width: 100px;
            height: 100px;
            background: silver;
        }
        .wrapper.selected {
            background: yellow;
        }
    </style>

JavaScript

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

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

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

query.find({
    success: function (results) {
        var friends = [];
        for (var i = 0; i < results.length; i++) {
            friends.push({
                imageURL: results[i].get('toUser').get('pic'),
                friendRequestId: results[i].id,
                username: results[i].get('toUser').get('username')
            });
        }

        // TW: replaced dynamic HTML generation with wrapper DIV that contains IMG and name DIV
        _.each(friends, function (item) {
            // using a wrapper so the user can click the pic or the name
            var wrapper = $('<div class="wrapper" data-friend-request-id="' + item.friendRequestId + '"></div>');
            wrapper.append('<img class="images" src="' + item.imageURL + '" />');
            wrapper.append('<div>' + item.username + '</div>');
            $('#container').append(wrapper);
        });

    },
    error: function (error) {
        alert("Error: " + error.code + " " + error.message);
    }
});


///SECTION 2 -Click/Select friend image to be captured and used with section 3//////////

// set up event handler
$('#container').on('click', '.wrapper', function () {
    console.log(this);
    FriendProfile();
    var wrapper = $(this);
    console.log(wrapper.data('friendRequestId'));
    // remove selected from all wrappers in case one was already selected
    $('#container .wrapper').removeClass('selected');
    // mark clicked wrapper as selected
    wrapper.addClass('selected');
    // save friendRequestId as a global that can be read by other code
    window.selectedFriendRequestId =...