title: Displaying an object within an array through DOM
body: <pre><code>  var products = [{
      "name": "Lusicious Jello Mix",
      "description": ["Very Elegant", "Trending item", "Come in Purple"],
      "price": 80.65
    }, {
      "name": "Tarnished Standing Desk",
      "description": ["Modular", "Works for both Tall and Loud People", "Smells like Productivity"],
      "price": 1654.99
    }, {
      "name": "Hand-made Hand Grenades",
      "description": ["Such gift!", "Much boom!", "Very safe for kids"],
      "price": 10.44
    }, {
      "name": "Pan-fried Cookie Dough",
      "description": ["Chocolate", "Family-size", "Hot Mess"],
      "price": 16.99
    }, {
      "name": "Fancy Dress Hanger",
      "description": ["Keep organized", "On Sale"],
      "price": 67.32
    }, {
      "name": "Snarky Britsh Mustache 3-Pack",
      "description": ["Sharing is caring!", "Hugs not drugs", "As seen on 'So You Think You Can Dance - Nigeria!'"],
      "price": 1.99
    }, ];
  
  for (var x=0; x&lt;products.length; x++){
          //PRODUCT NAME
          var prodname = document.createElement("h3");
          prodname.innerHTML = products[x].name;
          var listname = document.getElementById("name");
          listname.appendChild(prodname);
  
          var proddesc = document.createElement("h3");
          proddesc.innerHTML = products[x].description;
          var listdesc = document.getElementById("description");
          listdesc.appendChild(proddesc);
  
          var prodprice = document.createElement("h3");
          prodprice.innerHTML = products[x].price;
          var listprice = document.getElementById("price");
          listprice.appendChild(prodprice);
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Shopping Cart&lt;/title&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;&lt;/link&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;div id="shopHead"&gt;&lt;h3&gt;Shopping Cart&lt;h3/&gt;
          &lt;h3 id="name"&gt;&lt;/h3&gt;
          &lt;h3 id="description"&gt;&lt;/h3&gt;
          &lt;h3 id="price"&gt;&lt;/h3&gt;
  
  &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my object within an array called products. By which I am using an array and then using the DOM to display in my HTML page. However it is not coming out in order. I want to display the name in the array at position 0 and then the description at position 0 finally the priced at position 0. Instead it's displaying all my names followed by all of the description followed by all of the prices. It's a simple fix I'm sure but I'm stuck. </p>