title: PHP foreach categories and subcategories
body: <p>I am working with my project that has a capabality in making categories and subcategories. What I've made in my database is that the <code>subcategory column</code> has a relationship to <code>category_key column</code></p>
  
  <p>Meaning, all records that doesn't have a value in <code>subcategory column</code> is considered as category, the rest are subcategory.</p>
  
  <p>In the picture below: </p>
  
  <ul>
  <li><code>b</code> is a subcategory of <code>a</code></li>
  <li><code>e, g, h</code> is a subcategory of <code>d</code></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/6g3Rl.png" rel="nofollow"><img src="https://i.stack.imgur.com/6g3Rl.png" alt="enter image description here"></a></p>
  
  <p>And now I am using this code to diplay it in my page:</p>
  
  <pre><code>&lt;?php
      $query = "SELECT * FROM `categories`";
      $result = mysql_query($query);
      while($row = mysql_fetch_array($result)){
          if(empty($row['subcategory'])){
              echo '
                  &lt;li class="dd-item dd3-item" id="'.$row['category_key'].'" data-name="'.$row['category_name'].'" data-key="'.$row['category_key'].'"&gt;
                      &lt;div class="dd-handle dd3-handle"&gt;
                          &lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="dd-edit other-handle edit"&gt;
                          &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="dd-edit other-handle delete"&gt;
                          &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="dd3-content"&gt;'.$row['category_name'].'&lt;/div&gt;
                  &lt;/li&gt;
              '; 
          }else{
              echo '
                  &lt;ol class="dd-list"&gt;
                      &lt;li class="dd-item dd3-item" id="'.$row['category_key'].'" data-name="'.$row['category_name'].'" data-key="'.$row['category_key'].'"&gt;
                          &lt;div class="dd-handle dd3-handle"&gt;
                              &lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="dd-edit other-handle edit"&gt;
                              &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="dd-edit other-handle delete"&gt;
                              &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="dd3-content"&gt;'.$row['category_name'].'&lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ol&gt;
              ';
          }
      }
  ?&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/T15Zc.png" rel="nofollow"><img src="https://i.stack.imgur.com/T15Zc.png" alt="enter image description here"></a></p>
  
  <p>The problem is <code>&lt;ol&gt;</code> element is repeating as it must be only one and also it must be inside the parent <code>&lt;li&gt;</code> of it's category.</p>
  
  <p><a href="https://i.stack.imgur.com/yAOnb.png" rel="nofollow"><img src="https://i.stack.imgur.com/yAOnb.png" alt="enter image description here"></a></p>
  
  <p>Any help?</p>