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() {
    $.each($(this), function(index, element) {
        var $this = $(this);
        
        function advanceSlide() {
           $this.find('li:first-child').appendTo($this);
        }

        $this.find('li').click(function() { advanceSlide(); });
    });
}

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