JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

<div class="category-1-top-level-item">Main Item</div>
<div class="category-1-sub-item">Sub Item a</div>
<div class="category-1-sub-item">Sub Item b</div>

<div class="category-2-top-level-item">Main Item 2</div>
<div class="category-2-sub-item">Sub Item 2 a </div>
<div class="category-2-sub-item">Sub Item 2 b</div>

CSS

ul {list-style:disc;margin-left:10px;padding-left:10px;}

JavaScript

var topLevel = $('<ul />');
var subMenus = {};

function getId(el){
    return el.attr('class').split('-')[1];
}

$('div[class^="category-"][class$="-top-level-item"]').each(function(){
    var topLevelDiv = $(this);
    var id = getId(topLevelDiv);
    var subItems = $('<ul />');
    var li = $('<li />').text(topLevelDiv.text())
        .append(subItems).appendTo(topLevel);
    subMenus[id] = subItems;
});

$('div[class^="category-"][class$="-sub-item"]').each(function(){
    var subLevelDiv = $(this);
    var id = getId(subLevelDiv);
    var li = $('<li />').text(subLevelDiv.text())
        .appendTo(subMenus[id]);
});


topLevel.appendTo('body');