JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
    
</body>
</html>

JavaScript

$(document).ready(function(){
    var menuArray = [
    {
        'name':'main 1',
        'className':'main_1'
    },{
        'name':'main 2',
        'group':'group1'
    },{
        'name':'main 3',
        'group':'group1',
     },{
        'name':'main 4',
        'group':'group2'
     },{
        'name':'main5',
        'group':'group2'
    },{
        'name':'button'
    }
];

var createMenu = function(toolArray){
    var menu = $('<ul class="menu"><li class="top"><a></a></li></ul>').appendTo('body');
    var groupArray = [];
    
    $.each(toolArray, function(index, value){
        var group = value.group || '';
        var name = value.name || '';
        var elementClass = value.className || '';
        
        if(typeof(value.group) === 'undefined'){
            console.log('crete button - no group');
            
            var li = $('<li><a class="'+name+'">'+name+'</a></li>');
            li.click(value.onClick);
            menu.append(li);
        }
        else{
            if(typeof(groupArray[group]) === 'undefined'){//first element in group
                console.log('create first element in group '+group);
                groupArray[group] = 1;
                
                var li = $('<li class="'+group+'"><a class="'+elementClass+'">'+name+'</a></li>');
                menu.append(li);
            }
            else{
                if(groupArray[group] > 1){//third, ... element in group
                    var li = $('<li><a class="'+elementClass+'">'+name+'</a></li>');
                    $('li.'+group+' ul', menu).append(li);
                }
                else{//second element in group
                    var li_parent = $('li.'+group, menu).addClass('extend');
                    var ul = $('<ul><li class="'+group+'"><a class="'+elementClass+'">'+name+'</a></li></ul>');
                    $(ul).append(li_parent);
                }
                
                groupArray[value.group] = groupArray[value.group]+1;
       ...