JSFiddle - React, Tailwind, and code Playground

HTML

<button id="asc"> sort by price asd</button><button id="desc"> sort by price desc</button>
<ul id="productList">
    <div class="productContainer">
        <li>
            <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRD23fLxQXk26IPJjdq_iHhSg--9tzrRzI6aEAu-xrcgjxNZ83Q"></a>
            <div class="productInfo">
                <h4>
                    <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
                    <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
                </h4>
                <div class="product-price">               
                    <span id="lowestPrice">PRICE:
                    <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
                    <span class="productPriceForSorting">123 €</span></span>
                </div>
            </div>               
        </li>
    </div>
    <div class="productContainer">
        <li>
            <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRD23fLxQXk26IPJjdq_iHhSg--9tzrRzI6aEAu-xrcgjxNZ83Q"></a>
            <div class="productInfo">
                <h4>
                    <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
                    <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
                </h4>
                <div class="product-price">               
                    <span id="lowestPrice">PRICE:
                    <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
                    <span class="productPriceForSorting">321 €</span></span>
                </div>
            </div>               
        </li>
    </div>
    <div class="productContainer">
        <li>
            <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRD23fLxQXk26IPJjdq_iHhSg--9tzrRzI6aEAu-xrcgjxNZ83Q"></a>
            <div class="productInfo">
                <h4>
                    <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
                    <a class="productTitleForSorting"...

JavaScript

function sortByPrice(a,b){
    return parseFloat($(a).find('.productPriceForSorting').text()) > parseFloat($(b).find('.productPriceForSorting').text()) ? 1 : -1;
}

function sortByPriceDesc(a,b){
   return parseFloat($(a).find('.productPriceForSorting').text()) < parseFloat($(b).find('.productPriceForSorting').text()) ? 1 : -1;
}

function reorderEl(el){
    var container = $('#productList');
    container.html('');
    el.each(function(){
        $(this).appendTo(container);
    });
}
$('#asc').click(function(){
    parseFloat(reorderEl($('.productContainer').sort(sortByPrice)));
});

$('#desc').click(function(){
    parseFloat(reorderEl($('.productContainer').sort(sortByPriceDesc)));
});