JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li id="xrcise_set=1" class="xrcise_set"></li>
<ul class="setoptions_tbar">
<li class="setoption">
<div class="setoptions_btn seq_arrow seq_btn swap_set_up">
<div class="setoptions arrow_up"></div>
<div class="setoption_text">Swap</div>
</div>
</li>
<li class="setoption">
<div class="setoptions_btn seq_arrow seq_btn swap_set_down">
<div class="setoptions arrow_down"></div>
<div class="setoption_text">Swap</div>
</div>
</li>
<div style="clear:both;"></div>
</ul>
<!-- [END] setoptions_tbar -->
</ul>
CSS
ul {
display:block;
background-color:#eee;
color:#888;
padding: 0px 5px;
border-color:#ccc;
border-style:solid;
border-width:thin;
height:43px;
list-style: none;
}
.setoptions_btn {
float:left;
padding:0;
width:16%;
text-align:center;
}
.setoption_text {
display: block;
font-size: .85em;
text-align: center;
}
.setoptions {
display: block;
height: 30px;
width: 30px;
padding: 0;
margin: 0 auto;
}
div.arrow_up., div.arrow_down.setoptions {
height: 22px;
width: 22px;
position: relative;
top: 4px;
margin-bottom: 8px;
}
div.setoptions_btn:hover {
cursor: pointer;
background-color: #ddd;
}
.arrow_up {
background-image: url(http://mw.cpardon.com/media/images/icons/icon_arrows_blue-02-up.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.arrow_down {
background-image: url(http://mw.cpardon.com/media/images/icons/icon_arrows_blue-01-down.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
JavaScript
$("body").on("click", ".seq_btn", function (e) {
var arrow = $(e.target).attr("class").split("seq_btn ").pop();
switch (arrow) {
case "swap_set_up":
alert(arrow);
break;
case "swap_set_down":
alert(arrow);
break;
default:
}
// changeDetected(); // Trigger Record Action Buttons
});