JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div id="page" data-role="page">
    <div id="barcontainer">
        <div id="bar" data-role="navbar">
            <ul>
                <li><a href="#">Item1</a>

                </li>
                <li ><a class="ui-btn-active ui-state-persist"  href="#">Item2</a>

                </li>
                <li><a href="#">Item3</a>

                </li>
            </ul>
        </div>
    </div>
    <button data-role="button">Remove something</button>
</div>

JavaScript

$(function () {
    
    var remove_navbar_item = function(page_sel,navbar_container_sel, navbar_div_sel, remove_index) {
        var container = $(navbar_container_sel);
        var div = container.find(navbar_div_sel);
        var page = $(page_sel);
        var old_div = div.remove();
        page.page();
        var items = [];
        var i = 0;
        old_div.find('a').each(function (k,v) {
            if (k != remove_index) {
                var a = $(this);
                a = a.children().last();
                items.push([a.attr('href'), a.html(), a.attr("class") ]);
            }
        });
        var new_div = $('<div>');
        new_div.data('role', 'navbar');
        var new_ul = $('<ul>');
        $.each(items, function() {
            var new_li = $('<li>');
            var new_a = $('<a>');
            new_a.attr('href', this[0]);
            new.a.attr("class",this[2]);
            new_a.html(this[1]);
            new_li.append(new_a);
            new_ul.append(new_li);
        });
        new_div.append(new_ul);
        $('#barcontainer').append(new_div);

        new_div.navbar();
        $('#page').page();
    };
    
    $('#bar').navbar();
    $('button').on('click', function () {
        debugger;
        remove_navbar_item('#page', '#barcontainer', '#bar', 1);
    });
});