JSFiddle - React, Tailwind, and code Playground

HTML

<section class='container'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>

<section class='container'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>

<section class='misc'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>

CSS

.container,
.misc {
    padding:0 1em 1em;
    height:100px;
}

JavaScript

(function($){
    //our jQuery plugin
    $.fn.moveItems = function() {
        $(this).children(':first-child').hide(
            "slow",
            function(){
                var $child = $(this);
                var $parent = $child.parent();
               $child.appendTo($parent).show("slow",function() {
                    $parent.moveItems();
                });
            }
        );
    }
        

    //call the plugin.
    $(".container").moveItems();
    $(".misc:first").moveItems();
    
})(jQuery);