JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    <div class="menu">
        <ul>
            <li><a href="">Menu Item test</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
        </ul>
        <ul>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
        </ul>
    
    </div>
</div>
<p>&nbsp;</p>
<div id="top2">
    <div class="menu">
        <ul>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
        </ul>
        <ul>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
        </ul>
    
    </div>
</div>

CSS

span {
    color: red;
}

JavaScript

$("#top .menu ul li").each(function(i, el) {
    $(this).children('a').append("<span></span>");
});

$("#top2 .menu ul li").each(function() {
    var $this = $(this);
    $this.children('a').prepend("<span>" + ($this.index()+1) + "</span>");
});