JSFiddle - React, Tailwind, and code Playground

HTML

<div class="SC-TopNav">
    <div class="navbar navbar-inverse">
      <div class="navbar-inner">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"></a>

        <div class="nav-collapse collapse">
          <div style="margin-left: 2em" class="nav-pills SC-Topmenu nav">
            <div class="top-nav-colum layout_box ui-droppable">
              <div class="title-bar">
                <div data-placement="bottom" rel="tooltip" data-url="/post" data-pk=""
                data-type="text" class="title username editable editable-click"
                data-original-title="Doubleclick for edit">
                  Home
                </div>

                <div class="widget-controls">
                  <ul>
                    <li>
                      <a class="more" href="#"></a>

                      <ul class="subMenu">
                        <li><a onclick="SC_Miximize(this)" class="maximize_icon" href=
                        "#">Maximize</a></li>

                        <li><a onclick="SC_Minimize(this)" class="minimize_icon" href=
                        "#">Minimize</a></li>

                        <li><a onclick="SC_Delete(this)" class="delete_icon" href=
                        "#">Delete</a></li>
                      </ul>
                    </li>

                    <li class="Move">
                      <div>
                        <a class="move_left" href="" style="display: none;"></a>
                      </div>

                      <div>
                        <a class="move_right" href="" style="display: block;"></a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="panel"></div>

              <ul>
                <li id="10009" data-bind="10009" class="Pages ui-draggable" style=
                "display: list-item;"><a href="/Index">Home</a></li>
              </ul>
            </div>

           ...

JavaScript

$(document).ready(function() {
    var new_menu = '';
    $('.SC-Topmenu .top-nav-colum').each(function () {
        var menuItem = $(this);
        //get the menu title 
        var menuItemName = $('.title-bar div', this).html();
        var pages = $('.Pages', this);
        var pagesmenu = ""; var href = "";
        var pagecount = 1;        
        //create menu title 
        
        counter = 0;
        var panelmenu = "";
       if($('.Pages', this).length)
       {
           console.log('pages exist');
           if($('.Pages', this).length ==1)
           {
               new_menu += '<li><a href="'+$('.Pages a', this).attr('href') +'" class="storelink">' + menuItemName + '</a>';
           }
           else
           {
               new_menu += '<li><a href="#">' + menuItemName + '</a>';
               pagesmenu +="<ul>";
               $('.Pages', this).each(function(){
                   pagesmenu +='<li><a href="'+$('a', this).attr('href') +'" class="storelink">' + $('a', this).text() + '</a></li>';
               });
               pagesmenu += "</ul>";
           }
       }
        else
        {
            new_menu += '<li><a href="#">' + menuItemName + '</a>';
        }
      console.log('pages menu' +pagesmenu)
     //new_menu += '<li><a href="#">' + menuItemName + '</a>';
      
     if($('.panel', this).children('ul').length > 0)
     {
        panelmenu +="<div class='videoImage'>";
       //check wether menu contains div  panel and has children
        $('.panel', this).each(function () {
            panelmenu += $(this).html();
        });
        panelmenu +="</div>";
      
     }
     //check wether the menu contains div with SC-Root i.e categories
        if ($('.SC-Root', this).length) {
            $('.SC-Root', this).each(function () {
                var subMenuItem1 = $(this);
                //if the menu contains categories get the each category title by removing extra dom elements
                var subMenu1Name =...