JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ulMenu">
    <li class="main"> Cat 0 
        <ul class="subCat"> 
            <li>Subcat 0 
                <ul class="subCat"> 
                    <li>Sub-Subcat 0 
                        <ul class="subCat"></ul> 
                    </li> 
                </ul> 
            </li> 
            <li>Subcat 1</li> 
        </ul> 
    </li> 
</ul>

CSS

#cat_0 { color: red; }
#cat_0_0 { color: blue; }
#cat_0_0_0 { color: green; }
#cat_0_1 { color: orange; }

JavaScript

$('#ulMenu').children('li').each(function(cat) {

    $(this).attr('id', 'cat_' + cat).children('ul').children('li').each(function(sCat) {

        $(this).attr('id', 'cat_' + cat + '_' + sCat).children('ul').children('li').each(function(ssCat) {

            $(this).attr('id', 'cat_' + cat + '_' + sCat + '_' + ssCat);
        });
    });
});