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 () {
    
    

    $('li').click(function () {
                        
        var curr_li = $(this);
        var middle  = $('li:eq(2)') ;
        
        curr_li.replaceWith(middle.clone());
        middle.replaceWith(curr_li);
        
        
        
    });

});