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

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

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