JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div style="background: #F00;"></div>
    <div style="background: #00F;"></div>
    <div style="background: #0F0;"></div>
</div>
<br><a href="#" class="animateThem">Animate them !</a>

CSS

#container div { height: 20px;}

JavaScript

var children = [];
$("#container").children().each(function() {
    children.push(this);
});
                               
function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).fadeOut("slow", function() {
            fadeThemOut(children);
        });
    }
}

$(".animateThem").click(function() {
    fadeThemOut(children);
});