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($){})(jQuery) is the same thing as $(document).ready(function(){});
//I just prefer the first syntax
(function($){
//$.fn.functionName = function(){} creates a jQuery method
$.fn.moveItems = function() {this
//we want our function to grab the first child and hide it
$(this).children(':first-child').hide(
"slow",
//this function here happens when the hide is finished.
// It's called a callback function
function(){
//'this' in context here means the child.
//We store them as variables so we don't
//have to loop through all your code to find
//it everytime we want to do something.
var $child = $(this);
var $parent = $child.parent();
//take our child and append it(ie at the back) of
//what we tell it to, in this case our parent element
$child.appendTo($parent).show(
"slow",
//this function happens when show is finished,
//again it's called a callback function
function() {
//call this plugin on the parent. This
//causes it to loop for... well... ever
$parent.moveItems();
}
);
}
);
}
//call the plugin on our elements
$(".container").moveItems();
$(".misc:first").moveItems();
})(jQuery);