JSFiddle - React, Tailwind, and code Playground

by abdennour

HTML

<script src="http://raw.github.com/abdennour/jquery.sortContent/master/src/jquery.sortcontent.js"></script>
<div id="sortThis">
    <div id="1">Price:<span class="price">20</span> <span class="style">blue</span></div>
    <div id="2">Price:<span class="price">23</span> <span class="style">red</span></div>
    <div id="3">Price:<span class="price">10</span> <span class="style">red</span></div>
    <div id="4">Price:<span class="price">29</span> <span class="style">green</span></div>
    <div id="5">Price:<span class="price">35</span> <span class="style">blue</span></div>
</div>

<button id="sPrice" class="btnSort">Asc</button><br />
<button id="sStyle" class="btnSort">Desc</button><br />

JavaScript

$("#sPrice").click(function() {
   $('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})
});
$("#sStyle").click(function() {
   $('#sortThis').sortContent({asc:false,helper:function(e){return $(e).find('.price').html()}})
});