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://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js" charset="utf-8"></script>


<select name="huge" class="btn-group select select-block mbl select-multiple" id="options">
    <option value="0">Click to filter notifications</option>
    <option value="ActivityBadge">Badge Notifications</option>
    <option value="ActivityFriends">Friends Notifications</option>
</select>
<div class="options-wrapper">
    <div id="ActivityBadge" class="containerB">badge</div>
    <div id="ActivityFriends" class="containerF">friends</div>
</div>
</div>

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>

JavaScript

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

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


	//////Changes what is displayed after an select box option is selected////////

	$(function () {
	    $('select').change(function () {
	        var val = $(this).val();
	        var wrapper = $('.options-wrapper');
	        if (val) {
	            wrapper.find('div:not(#' + val + ')').slideUp();
	            wrapper.find('#' + val).slideDown();
	        } else {
	            wrapper.find('div').slideDown();
	        }
	    });


	});

	//////////////Query to return badges to the page/////////

	var notificationQuery = new Parse.Query('myBadges');
	notificationQuery.equalTo('B_Notify', 'Unread');
	notificationQuery.equalTo('SentTo', Parse.User.current());
	notificationQuery.include(['SentTo', 'uploadedBy']);
	notificationQuery.find({
	    success: function (Badgeresults) {
	        var Badges = [];
	        for (var i = 0; i < Badgeresults.length; i++) {
	            Badges.push({
	                imageURL: Badgeresults[i].get('Global_Badges_img'),
	                AwardedBy: Badgeresults[i].get('uploadedBy').get('username'),
	                AwardedTo: Badgeresults[i].get('SentTo').get('username'),
	                badgename: Badgeresults[i].get('BadgeName'),
	                BNotify: Badgeresults[i].get('B_Notify'),


	                fetchedObject: Badgeresults[i]

	            });

	        }

	        if (Badgeresults.length === 0) {
	            //console.log("No results");
	            $('.mytextwithiconBadgeActivityNo').show();
	        } else {
	            //console.log("Results");
	            $('.mytextwithiconBadgeActivityYes').show();
	        }

	        _.each(Badges, function (item) {
	            var wrapper = $('<div cla></div>');

	            wrapper.append('<img class="tagNotifyImg images responsive-image" src="' +...