title: Adding JSON items to an HTML list using JQuery
body: <p>I am adding items from a JSON file using JQuery to an HTML page dynamically.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='cssmenu'&gt;
      &lt;ul id='options'&gt;
          &lt;li class='active'&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
              &lt;ul id='home'&gt;&lt;/ul&gt;&lt;/li&gt;
          &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
              &lt;ul id='product_list'&gt;&lt;/ul&gt;&lt;/li&gt;
          &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;
              &lt;ul id='company'&gt;&lt;/ul&gt;&lt;/li&gt;
          &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;
              &lt;ul id='contact'&gt;&lt;/ul&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function () {
      $.getJSON('../JSON/cwdata.json', function (cwData) {
          // Add the product categories
          $.each(cwData.product, function (i, product) {
              var option_cate = ('&lt;li class="item"&gt;&lt;a href="#"&gt;' + product.category + '&lt;/a&gt;&lt;/li&gt;');
              $('#product_list').append(option_cate);
              // Add the product names
              $.each(product.items, function (i, item) {
                  var option_name = ('&lt;ul class="details" style="display: none;"&gt;&lt;li class="name"&gt;&lt;a href="#"&gt;' + item.name + '&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;');
                  $(".item").append(option_name);
              }); //$.each(...)
          }); //$.each(...)
      }); //$.getJSON
  });     //$document
  </code></pre>
  
  <p>JSON(cwdata.json file):</p>
  
  <pre><code>{
      "product": [
          {
              "category": "Product 1",
              "items": [
                  {
                      "name": "Item 1.1",
                                      "name": "Item 1.2"
                  }
              ]
          },
          {
              "category": "Product 2",
              "items": [
                  {
                      "name": "Item 2"
                  }
              ]
          },
          {
              "category": "Product 3",
              "items": [
                  {
                      "name": "Item 3"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>The problem is the data is being added the wrong way. The HTML looks like this after the page has been loaded:</p>
  
  <p><img src="https://i.stack.imgur.com/RdkZS.png" alt="HTML after page has been loaded">
      .</p>
  
  <p>Item 1, Item 2 and Item 3 are being added to Product 1, whereas I only want all the "items" under "Product 1" to be in the the Product 1 list.</p>
  
  <p>Basically:</p>
  
  <pre><code>  Product 1
        - Item 1.1
        - Item 1.2
  </code></pre>
  
  <p>But I am getting:</p>
  
  <pre><code>  Product 1
        - Item 1.1
        - Item 2
        - Item 3
  </code></pre>
  
  <p>Any tips would be appreciated.</p>