JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div class=".dashboard-main" id="wow-tab">
    <div class="popular-story"> <span class="story-image">
    <img src="width='150'" alt="">
  </span>

        <div class="story-info"> <span class="story-date">2013-08-14T09:32:26-04:00</span>

            <br> <span class="story-title">
      <a href="http://www.peopleenespanol.com/article/tras-ser-operado-de-emergencia-gabriel-soto-agradece-su-ex-geraldine-bazan">Tras ser operado de emergencia, Gabriel Soto agradece a su ex Geraldine Bazan</a>
    </span>

            <br> <span class="story-share">
      <ul class="socmedia">
        <li class="fbshare">
          <a href="http://www.facebook.com/share.php?u=http://www.peopleenespanol.com/article/tras-ser-operado-de-emergencia-gabriel-soto-agradece-su-ex-geraldine-bazan" title="Post to Facebook" target="_blank" rel="nofollow">Facebook</a>
        </li>
        <li class="tweet">
          <a href="http://twitter.com/share?url=http://www.peopleenespanol.com/article/tras-ser-operado-de-emergencia-gabriel-soto-agradece-su-ex-geraldine-bazan&amp;text=Tras" ser="" operado="" de="" emergencia,="" gabriel="" soto="" agradece="" a="" su="" ex="" geraldine="" bazan="" title="Post to Twitter" target="_blank" rel="nofollow">Tweet</a>
        </li>
      </ul>
    </span>

            <br> <span class="story-share-count">Compartido 55t Veces</span>

        </div>
        <div class="user-reaction">
            <div class="text">
                <p class="header">Your Reaction</p>
                <p class="totalvotes"><strong>47</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"...

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) {
    var article_id = 'blah';
    var name = $(thisvar).closest('div').parent().parent().find('.story-info .story-title a').text();
    var flavor = $(thisvar).attr('class');
    var testme = $(thisvar).closest('li').find('.count').text();
    alert(testme);
};