JSFiddle - React, Tailwind, and code Playground

by KarmaProd

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul id="menu"></ul><hr>
<ul id="menu2"></ul><hr>

CSS

.ui-menu {
  width: 150px;
}

JavaScript

$(function() {

  var data = {
    menu: [{
      name: 'Home page',
    }, {
      name: 'Energia',
      sub: [{
          name: 'Dashboard'
        },
        {
          name: 'Dati'
        },
        {
          name: 'Report'
        }
      ]
    }, {
      name: 'Rifiuti',
      sub: [{
          name: 'Dashboard'
        },
        {
          name: 'Dati'
        },
        {
          name: 'Report'
        }
      ]
    }]
  };
  
  var data2 = {
    menu: [{
      name: 'Alert',
      sub: [{
          name: 'AAA'
        },
        {
          name: 'BBB'
        }
      ]
    }, {
      name: 'CCC',
      sub: [{
          name: 'DDD'
        },
        {
          name: 'EEE'
        }
      ]
    }]
  };
  var getMenuItem = function(itemData) {
    var item = $("<li>")
      .append(
        $("<a>", {
          html: itemData.name
        }));
    if (itemData.sub) {
      var subList = $("<ul>");
      $.each(itemData.sub, function() {
        subList.append(getMenuItem(this));
      });
      item.append(subList);
    }
    return item;
  };

  var $menu = $("#menu");
  $.each(data.menu, function() {
    $menu.append(
      getMenuItem(this)
    );
  });
  
  var $menu2 = $("#menu2");
  $.each(data2.menu, function() {
    $menu2.append(
      getMenuItem(this)
    );
  });
  let UI_menu = false;
  if (UI_menu){
  	$menu.menu();
  	$menu2.menu();
  }
});