JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="active">4</li>
    <li>5</li>
</ul>

CSS

ul li{
    float: left;
    list-style: none;
    background: red;
    margin-left: 20px;
    display: block;
    padding: 20px;
}

.active{
    
}

JavaScript

$(document).ready (function () {
    
    function setli() {
        var curr_li = $(this);
        var middle  = $('li:eq(2)') ;
        curr_li.replaceWith(middle.clone());
        middle.replaceWith(curr_li);
        $('li').unbind('click');
        $('li').bind('click',setli);
    }
    $('li').bind('click',setli);
});