JSFiddle - React, Tailwind, and code Playground

by Axel Duch

HTML

<section class="box explore">
	<div id="ProductContainer"  class="row">
			<div id="1232132" data-name="B" data-category="Category_A" class="explore-cell">
			 <h>B</h>
			 <p>Category_A</p>
			</div>
		<div id="123" data-name="A" data-category="Category_B" class="explore-cell">
			<h>A</h>
			<p>Category_B</p>
		</div>
		<div id="1232152351" data-name="C" data-category="Category_A" class="explore-cell">
			<h>C</h>
			<p>Category_A</p>
		</div>
		<div id="12342341" data-name="E" data-category="Category_B" class="explore-cell">
			<h>E</h>
			<p>Category_B</p>
		</div>
		<div id="1325321" data-name="D" data-category="Category_B" class="explore-cell">
			<h>D</h>
			<p>Category_B</p>
		</div>
	   
	</div>
</section>

JavaScript

var $container = $('#ProductContainer'); 
var $products = $container.find('div');

var multisort = getMultisortFn([{
        name: 'category',
        asc: false
    }, {
        name: 'name',
        asc: true
    }], {
        name: retrieveDataAttribute,
        category: retrieveDataAttribute
    });

$products.sort(multisort);
$products.detach().appendTo($container);


function getMultisortFn(columns, provideColumnData) {
    return function (a, b) {
        for (var i = 0, l = columns.length; i < l; i++) {
            var column = columns[i];
            var aColumnData = provideColumnData[column.name](a, column.name);
            var bColumnData = provideColumnData[column.name](b, column.name);
            if (aColumnData !== bColumnData) {
                if (column.asc) {
                    return String.prototype.localeCompare.call(aColumnData, bColumnData);
                }
                
                return String.prototype.localeCompare.call(bColumnData, aColumnData);    
            }
        }
    };
}

function retrieveDataAttribute(item, attribute) {
    return $(item).data(attribute);
}