JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div class="user-reaction">
    <div class="text">
        <p class="header">Your Reaction</p>
        <p class="totalvotes"><strong>52</strong> votes</p>
    </div>
    <div class="emotes firstvote">
        <ul>
            <li class="wow">
                <label> <span class="emote-image">Wow</span>
 <span id="wow_count" class="count">5</span>

                </label>
            </li>
            <li class="funny">
                <label> <span class="emote-image">Funny</span>
 <span id="funny_count" class="count">11</span>

                </label>
            </li>
            <li class="love">
                <label> <span class="emote-image">Love</span>
 <span id="love_count" class="count">31</span>

                </label>
            </li>
            <li class="sad">
                <label> <span class="emote-image">Sad</span>
 <span id="sad_count" class="count">2</span>

                </label>
            </li>
            <li class="angry">
                <label> <span class="emote-image">Angry</span>
 <span id="angry_count" class="count">3</span>

                </label>
            </li>
        </ul>
    </div>
</div>

CSS

/**
 * CSS for pesp_reader_react.
 */
 * {
    margin:0;
    padding:0;
    border:0;
    background:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    line-height:inherit;
    letter-spacing:inherit;
    list-style:none;
    text-decoration:none;
}
/* ---------- Emotes ---------- */
 #userReaction {
    float:right;
    width:355px;
}
#userReaction .text {
    float:left;
    width:120px;
    margin-right:4px;
    padding-top:10px;
    border-right:1px dotted #d6d6d6;
}
#userReaction .emotes {
    float:right;
    width:230px;
}
.articlePoll .polloptions li input {
    border:0;
}
#reactLinks {
    clear:both;
}
#reactLinks .relatedBox {
    display:none;
    width:600px;
}
#reactLinks .relatedBox .headerbar {
    height:43px;
    border-bottom:1px solid #fff;
    color:#fff;
}
.wow .text {
    color:#000;
}
#reactLinks .relatedBox .headerbar h4 {
    float:left;
    padding-left:14px;
    font:bold 16px arial, sans-serif;
    text-transform:uppercase;
}
#reactLinks .relatedBox .headerbar span.arrow {
    display:block;
    width:28px;
    height:18px;
}
#reactLinks .wow .headerbar {
    background:url('../img/yellow_bar.png') bottom left no-repeat;
    margin-left: 12px;
}
#reactLinks .funny .headerbar {
    background:url('../img/green_bar.png') bottom left no-repeat;
    margin-left: 12px;
}
#reactLinks .love .headerbar {
    background:url('../img/pink_bar.png') bottom left no-repeat;
    margin-left: 12px;
}
#reactLinks .sad .headerbar {
    background:url('../img/blue_bar.png') bottom left no-repeat;
    margin-left: 12px;
}
#reactLinks .angry .headerbar {
    background:url('../img/red_bar.png') bottom left no-repeat;
    margin-left: 11px;
}
#reactLinks .wow .headerbar span.arrow {
    margin-left:378px;
    background:url('../img/yellow_diamond.png') bottom left no-repeat;
}
#reactLinks .funny .headerbar span.arrow {
    margin-left:424px;
    background:url('../img/green_diamond.png') bottom left no-repeat;
}
#reactLinks .love...

JavaScript

$('.emotes li').click(function () {
    sendDashboardVote($(this));

});
sendDashboardVote = function (thisvar) {
    alert('test');
var testme = $(thisvar).closest('li').find('.count').text();
    alert(testme);
};