JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="swapify">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul class="swapify">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

li {
    background: #EEE;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    border: 1px solid #FFF;
    width: 40px
}
li:first-child {
    background: #CCC
}

JavaScript

$.fn.swapify = function () {
    // Here, `this` is a jQuery collection with multiple elements in
    this.each(function () {
        // Here, `this` is a single DOM node

        // using `var`, we make a variable bound to this scope
        // while we're at it, we wrap the DOM node with jQuery
        // Rather than $this, I've named the variable something meaningful
        var $carousel = $(this);

        // Declaring a function in the same scope as our var
        // creates a "closure",  which can always see the scope it was created in
        function advanceSlide() {
            // When this runs, it will be in response to a click,
            // and jQuery will set `this` to the element clicked on
            
            // Our $carousel variable, however, is carried in the closure,
            // so we know it will be the container we want
            $carousel.find('li:first-child').appendTo($carousel);
        }

        // A function in JS is just another kind of object, 
        // so we can pass in advanceSlide like any variable
        $carousel.find('li').on('click', advanceSlide);
    });
}

$(document).ready(function () {
    $('.swapify').swapify();
});