JSFiddle - React, Tailwind, and code Playground

HTML

<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">Sort By Price</button><br />
<button id="sStyle" class="btnSort">Sort By Style</button><br />

JavaScript

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sPrice').data("sortKey", "span.price");
$('#sStyle').data("sortKey", "span.style");


/* sort on button click */
$("button.btnSort").click(function() {
   sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
});