title: how to add submenu under submenu dynamically using jquery?
body: <p>i need to create following menubar structure dynamically using jquery. </p>
  
  <pre><code>-Setting
  --System
  ---user
  ---group
  ---acl
  --Vresource
  ---vms
  ---vnet-conf
  --Configuration
  ---template
  ---image
  </code></pre>
  
  <p>in my case system's submenu{user,group,acl} falls under setting instead of System menu. </p>
  
  <p>i've bellow code written in my .js file.</p>
  
  <pre><code> var li_item = '&lt;li id="li_'+tab_name+'" class="'+tabClass+' '+parent+'"&gt;&lt;a href="#"&gt;'+tab_info.title+'&lt;span class="icon-caret-left icon-large plusIcon right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;';
  
      //if this is a submenu... div#menu ul#navigation li.vresources-tab
      if (parent.length) {
          var children = $('div#menu ul#navigation li.'+parent);
  
          //if there are other submenus, insert after last of them
          if (children.length){
              $(children[children.length-1]).after(li_item);
          }else{ //instert after parent menu
              $('div#menu ul#navigation li#li_'+parent).after(li_item);
          }
      } else { //not a submenu, instert in the end
          $('div#menu ul#navigation').append(li_item);
      };
  </code></pre>
  
  <p>this code generate bellow html snippet.</p>
  
  <pre><code>&lt;div class="menu-navZ"&gt;
  &lt;ul id="navigation" class="tabs vertical"&gt;
  &lt;li id="li_settings-tab" class="topTab tab_with_no_content"&gt;
  &lt;li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;"&gt;
  &lt;li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;"&gt;
  &lt;li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;"&gt;
  &lt;li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: none;"&gt;
  &lt;li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  &lt;li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  &lt;li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as you can see here, <code>&lt;li&gt;</code>statement of sub menu generated in incorrect way, it should come under the proper menu like last three statements user,group and acl should come under system. </p>
  
  <p>Expected output :</p>
  
  <pre><code>&lt;div class="menu-navZ"&gt;
  &lt;ul id="navigation" class="tabs vertical"&gt;
  &lt;li id="li_settings-tab" class="topTab tab_with_no_content"&gt;
  &lt;li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  &lt;li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  &lt;li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;"&gt;
  
  &lt;li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;"&gt;
  &lt;li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: 
  
  &lt;li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"&gt;
  &lt;li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;"&gt;
  &lt;li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;"&gt;
  none;"&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>please help me figure out this issue. </p>