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() {
    function advanceSlide(e) {
        $this = $(e.delegateTarget);
        $this.find('li:first-child').appendTo($this)
    }
    
    return function swapify() {    
        this.on("click", "li", advanceSlide)
    };
}());

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