JSFiddle - React, Tailwind, and code Playground

by lughino

HTML

<ul class="categories">
    <li class="selected">
        <a href="#">1 Featured</a>
    </li>
    <li>
        <a href="#">1 Popular Genres</a>
    </li>
    <li class="more">
        <a href="#">1 My Rooms &gt;</a>
        <ul>
            <li><a href="#">2 Tristique Cras</a></li>
            <li><a href="#">2 Porta Etiam &gt;</a></li>
            <li><a href="#">2 Mattis Tortor</a></li>
            <li class="more">
                <a href="#">2 Cras Fermentum &gt;</a>
                <ul>
                    <li><a href="#">3 Tristique Cras</a></li>
                    <li><a href="#">3 Porta Etiam</a></li>
                    <li><a href="#">3 Mattis Tortor</a></li>
                    <li><a href="#">3 Cras Fermentum</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$(document).on('click', '.categories > li a', function(event){
    event.preventDefault();
    if ($(this).parent().is('.more')) {
        $(this).siblings('ul').prepend("<li class='back'><a href='#'>&lt; " + $(this).html() + "</a></li>");
    }  else if ($(this).parent().is('.back')) {
        console.log('it worked');
    }
});