JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent_container">

<div class="circle" n="1">1</div>
<div class="circle" n="2">2</div>
<div class="circle" n="3">3</div>
<div class="circle" n="8">4</div>
<div class="circle" n="5">5</div>
<div class="circle" n="6">6</div>
<div class="circle" n="7">7</div>
<div class="circle" n="4">8</div>
<div class="circle" n="9">9</div>

</div>

CSS

.circle {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: grey;
    border: 1px solid white;
    opacity: 0;
}

JavaScript

var delay = 0;
$('div').each(function(){
    $(this).delay(delay).animate({
        opacity:1,
    },500);
    delay += 500;
});
/*
$("div[n^=num]").sort(function (a, b) {
    return a.n.replace('num', '') > b.n.replace('num', '')
}).each(function(){
   console.log(this.n)
})*/