JSFiddle - React, Tailwind, and code Playground
HTML
<div class="element" data-order="2">Div 2</div>
<div class="element" data-order="1">Div 1</div>
<div class="element" data-order="3">Div 3</div>
CSS
.element {
display: none;
border: 1px solid red;
height: 4rem;
line-height: 4rem;
margin: 2rem;
text-align: center;
}
JavaScript
function sortByDataOrder(a, b) {
var aOrder = a.dataset.order;
var bOrder = b.dataset.order;
if (aOrder < bOrder) {
return -1;
} else if (aOrder > bOrder) {
return 1;
} else {
return 0;
}
}
var $elements = $('.element');
$elements.sort(sortByDataOrder).each(function (i) {
var o = $(this).attr('data-order');
$(this).delay((i++) * 500).fadeTo(1000, 1);
});