title: Create dynamic menu structure with ajax jquery
body: <p><a href="https://i.stack.imgur.com/IjE4J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IjE4J.png" alt="enter image description here"></a>How to create dynamic menu structure like </p>
  
  <pre><code>&lt;ul id="sidebarnav"&gt; 
        &lt;li&gt;
           &lt;a href="#"&gt;&lt;/a&gt; /*Root Menu*/
             &lt;ul&gt; 
               &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; /*Sub Menu*/
               &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; /*Sub Menu*/
            &lt;/ul&gt;
        &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I use like that in jquery but couldnt make algorityhm ..</p>
  
  <pre><code>            success: function (data) {
  
                  for (var i = 0; i &lt; data.d.length; i++) {
                      if (data.d[i].ParentID == '0') {
                          $("#sidebarnav").append('&lt;li class="mainLi"&gt; &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="fas fa-chart-line"&gt;&lt;/i&gt;&lt;span class="hide-menu lang" data-key="' + data.d[i].MenuID + '"&gt;' + data.d[i].MenuName + '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
                          var list = $(".mainLi").append('&lt;ul class="goksel"&gt;&lt;/ul&gt;').find('.goksel');
                      }
  
  
                          list.append(' &lt;li&gt;&lt;a href="/Reports/ProductBOM.aspx"&gt;&lt;span class="lang" data-key="' + data.d[i].MenuID + '"&gt;' + data.d[i].MenuName + '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
  
  
                  }
  </code></pre>
  
  <p>when i use like that i got that output</p>
  
  <p><a href="https://i.stack.imgur.com/LTKf5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LTKf5.png" alt="enter image description here"></a></p>