JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tinysort.sjeiti.com/scripts/jquery.tinysort.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">9</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="sPriceA" class="btnSort">Sort By Price (ascending)</button><br />
<button id="sPriceD" class="btnSort">Sort By Price (descending)</button><br />
<button id="sStyleA" class="btnSort">Sort By Style (ascending)</button><br />
<button id="sStyleD" class="btnSort">Sort By Style (descending)</button><br />

JavaScript

/* assign data attributes to item div */
var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
    var p = $(this);
    p.attr("data-price", p.find("span.price").text());
    p.attr("data-style", p.find("span.style").text());
});

/* setup sort attributes */
$('#sPriceA').data("tsortAttr", { attr:"data-price", order:"asc" });
$('#sPriceD').data("tsortAttr", { attr:"data-price", order:"desc" });
$('#sStyleA').data("tsortAttr", { attr:"data-style", order:"asc" });
$('#sStyleD').data("tsortAttr", { attr:"data-style", order:"desc" });

/* sort on button click */
$("button.btnSort").click(function() {
   sortThis.tsort($(this).data("tsortAttr")); 
});