JS Toggle Submenu в Mega Menu

Проблема, с которой я сталкиваюсь, заключается в создании подменю внутри другого меню.

Демо: ЖИВАЯ ДЕМО (важно, потому что CSS также необходим

$(function () {
  // Desktop Menu
  var categoriesMenu = $(".list-ausbildung-categories li");
  var triggerMenu = $(".dropdown-submenuSide");
  var highlightsList = $(".list-ausbildung-highlights");
  var submenuList = $(".list-ausbildung-submenu");

  $('.list-ausbildung-categories').on('click', 'li', function () {

      if ( $(this).hasClass('active') ){
          triggerMenu.removeClass('asg-gray-bg-200');
          $(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
      } else {
          highlightsList.hide();
          submenuList.show();
          triggerMenu.addClass('asg-gray-bg-200');

          $('li.active').removeClass('active');
          $(this).addClass('active');

          var subMenu = $(this).find(".dropdown-submenu").html();

          $(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
      }
  });

  $('.asg-megamenu div[class^ = "col"]:first-child').on('click', function () {
      categoriesMenu.removeClass('active');
      triggerMenu.removeClass('asg-gray-bg-200');
      submenuList.hide();
      highlightsList.show();
  });
});

У меня есть это мегаменю Bootstrap, которое также содержит подменю (столбец 2). При щелчке он должен скрывать столбец 3 и отображать элементы подменю. (делает свою работу)

В настоящее время я захватываю содержимое подменю с помощью jquery html(), а затем помещаю его в третий столбец (вероятно, не самый чистый метод).

Проблема: всякий раз, когда я закрываю подменю и снова нажимаю, оно не открывается обратно.