title: Printing Multiple <p> Tags within a <div> Using JavaScript
body: <p>I'm trying to use JavaScript to create some html <code>&lt;p&gt;</code> and <code>&lt;div&gt;</code> tags with some information within in. The issue I'm having is that my <code>totalAmountPrintOut</code> function is only returning 1 <code>&lt;p&gt;</code> tag within the <code>#printDivOut&lt;div</code>> when I want it to return 8. If anyone could help me trouble shoot this issue, I'd really appreciate it.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="input1-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="Jerry Reimer" content="Cake Baby Bakery Recipe Calculator"&gt;
      &lt;title&gt;Cake Baby Bakery Recipe Calculator&lt;/title&gt;
      &lt;script src="/common/ajaxCheat.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .starter-template {
              padding: 40pinput1 15pinput1;
              teinput1t-align: center;
          }
      &lt;/style&gt;
      &lt;script src="/common/ajaxCheat.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;  
      &lt;div id="wholePage" &gt;
          &lt;img src="img1.png" alt="Cake Baby"&gt;
          &lt;div id="title"&gt;Cake Baby&lt;/div&gt;
  
  
          &lt;div id="cakeHook" &gt;
              &lt;div id="displayBlock1"&gt;
                  &lt;div id="recipe1Div"&gt;
                      Chocolate Cake (per cake): &lt;br&gt; 1.75 cups of Flour, 2 cup of Sugar, 2 Eggs, 1.5 tsp Baking Powder and 1.75 tsp of Baking Soda and 0.75 cups of Chocolate Powder
                  &lt;/div&gt;
  
                  &lt;form &gt;
                          &lt;input type="number" name="recipe1" min="0" mainput1="10000" value="0" id="form1"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div id="displayBlock2"&gt;
                  &lt;div id="recipe2Div"&gt;
                      Cookies (per two dozen): &lt;br&gt; 0.5 cup butter, 1.5 cups of flour, 0.5 tsp Baking Powder, 1 Egg, 1 Cup of Chocolate Chips, 3.0 cups sugar
                  &lt;/div&gt;
                  &lt;form &gt;
                          &lt;input type="number" name="recipe2" min="0" mainput1="10000" value="0" id="form2"&gt;
                  &lt;/form&gt; 
              &lt;/div&gt;
  
              &lt;button id="calculateButton"&gt;
                  Calculate
              &lt;/button&gt;
  
              &lt;div id="Total"&gt;
                  Total
                  &lt;form id="output"&gt;
                      &lt;output id="totalCalculation"&gt;
  
                      &lt;/output&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;div id="printOutDiv"&gt;
  
      &lt;/div&gt;
  
      &lt;script&gt;
          //costPrintOut object constructor
          var costPrintOut = function(bodyText) {
              this.body = bodyText;
              this.printOut = function() {
                  var printOutDiv = document.getElementById("printOutDiv");
                  var costPrintOutDiv = document.createElement("div");
                  costPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total cost of the recipe's is: $" + this.body + "&lt;/p&gt;";
                  printOutDiv.appendChild(costPrintOutDiv);
              };
          };
  
          //totalAmountPrintOut object constructor
          var totalAmountPrintOut = function(bodyText1,bodyText2,bodyText3,bodyText4,bodyText5,bodyText6,bodyText7,bodyText8) {
              this.body1 = bodyText1;
              this.body2 = bodyText2;
              this.body3 = bodyText3;
              this.body4 = bodyText4;
              this.body5 = bodyText5;
              this.body6 = bodyText6;
              this.body7 = bodyText7;
              this.body8 = bodyText8;
              this.printOutRecipe = function() {
                  var printOutDiv = document.getElementById("printOutDiv");
                  var amountPrintOutDiv = document.createElement("div");
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body1 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body2 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body3 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body4 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body5 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body6 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body7 + " cups." + "&lt;/p&gt;";
                  amountPrintOutDiv.innerHTML = "&lt;p&gt;" + "The total amount flour from the recipes is " + this.body8 + " cups." + "&lt;/p&gt;";
                  printOutDiv.appendChild(amountPrintOutDiv);
              };
          };
          //function that steps through and parses JSON text  
          //passed to ajax get code
          var callback = function(text){
              var parsedData = JSON.parse(text);
              console.log(parsedData);
  
  
  
  
              //retrieve input values
              var input1 = document.getElementById("form1").value;
              var input2 = document.getElementById("form2").value;
  
              //calculate total amount of ingredients  &amp; total cost of each ingredient
              var totalAmountofFlourIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Flour);
              var totalAmountofSugarIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Sugar);
              var totalAmountofEggsIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Eggs);
              var totalAmountofBakingPowderIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].BakingPowder);
              console.log(totalAmountofBakingPowderIngredientForCake);
              var totalAmountofBakingSodaIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].BakingSoda);
              var totalAmountofChocolatePowderIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].ChocolatePowder);
  
              var costOfflourIngredientTotalForCake = totalAmountofFlourIngredientForCake * (parsedData[0].products[0].cost);
              var costOfsugarIngredientTotalForCake = totalAmountofSugarIngredientForCake * (parsedData[0].products[1].cost);
              var costOfeggIngredientTotalForCake = totalAmountofEggsIngredientForCake * (parsedData[0].products[2].cost);
              var costOfbakingpowderIngredientTotalForCake = totalAmountofBakingPowderIngredientForCake  * (parsedData[0].products[3].cost);
              var costOfbakingSodaIngredientTotalForCake = totalAmountofBakingSodaIngredientForCake  * (parsedData[0].products[4].cost);
              var costOfchocPowderIngredientTotalForCake = totalAmountofChocolatePowderIngredientForCake  * (parsedData[0].products[5].cost);
  
              var totalAmountofFlourIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Flour);
              var totalAmountofSugarIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Sugar);
              var totalAmountofEggsIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Eggs);
              var totalAmountofBakingPowderIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].BakingPowder);
              console.log(parsedData[0].recipes[1].ingredients[0].BakingPowder);
              console.log(totalAmountofBakingPowderIngredientForCookies);
              var totalAmountofButterIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Butter);
              var totalAmountofChocolateChipIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].ChocolateChips);
  
              var costOfbutterIngredientTotalForCookies = totalAmountofButterIngredientForCookies * (parsedData[0].products[7].cost);
              var costOfflourIngredientTotalForCookies = totalAmountofFlourIngredientForCookies * (parsedData[0].products[0].cost);
              var costOfsugarIngredientTotalForCookies = totalAmountofSugarIngredientForCookies * (parsedData[0].products[1].cost);
              var costOfeggsIngredientTotalForCookies = totalAmountofEggsIngredientForCookies * (parsedData[0].products[2].cost);
              var costOfbakingPowderIngredientTotalForCookies = totalAmountofBakingPowderIngredientForCookies * (parsedData[0].products[3].cost);
              var costOfchocolateChipsIngredientTotalForCookies = totalAmountofChocolateChipIngredientForCookies * (parsedData[0].products[6].cost);
  
              //add amount of ingredients together from cookies and cake recipes
              var totalAmountofFlour = totalAmountofFlourIngredientForCookies + totalAmountofFlourIngredientForCake;
              var totalAmountofSugar = totalAmountofSugarIngredientForCake + totalAmountofSugarIngredientForCookies;
              var totalAmountofEggs = totalAmountofEggsIngredientForCake + totalAmountofEggsIngredientForCookies;
              var totalAmountofBakingPowder = totalAmountofBakingPowderIngredientForCake + totalAmountofBakingPowderIngredientForCookies;
              console.log(totalAmountofBakingPowder);
              var totalAmountofBakingSoda = totalAmountofBakingSodaIngredientForCake;
              var totalAmountofChocPowder = totalAmountofChocolatePowderIngredientForCake;
              var totalAmountofChocChips = totalAmountofChocolateChipIngredientForCookies;
              var totalAmountofButter = totalAmountofButterIngredientForCookies; 
  
              //add cost of ingredients together from cookies and cake recipes
              var totalCostofFlour = costOfflourIngredientTotalForCake + costOfflourIngredientTotalForCookies;
              var totalCostofSugar = costOfsugarIngredientTotalForCake + costOfsugarIngredientTotalForCookies;
              var totalCostofEggs = costOfeggIngredientTotalForCake + costOfeggsIngredientTotalForCookies;
              var totalCostofBakingPowder = costOfbakingpowderIngredientTotalForCake + costOfbakingPowderIngredientTotalForCookies;
              var totalCostofBakingSoda = costOfbakingSodaIngredientTotalForCake;
              var totalCostofChocPowder = costOfchocPowderIngredientTotalForCake;
              var totalCostofChocChips = costOfchocolateChipsIngredientTotalForCookies;
              var totalCostofButter = totalAmountofButterIngredientForCookies;
              console.log(totalCostofBakingPowder);
  
              var totalCost = totalCostofFlour + totalCostofSugar + totalCostofEggs + totalCostofBakingPowder + totalCostofBakingSoda + totalCostofChocPowder + totalCostofChocChips + totalCostofButter;
              console.log(totalCost);
  
              var displayTotalCost = new costPrintOut(totalCost);
              displayTotalCost.printOut();
  
              var displayTotalAmountofIngredients = new totalAmountPrintOut(totalAmountofFlour,totalAmountofSugar,totalAmountofEggs,totalAmountofBakingPowder,totalAmountofBakingSoda,totalAmountofChocPowder,totalAmountofChocChips,totalAmountofButter);
              displayTotalAmountofIngredients.printOutRecipe();
          };
          //onClick event that returns text
          document.getElementById("calculateButton").onclick = function() {
              //returning json data
              ajax.get("a1data.json", callback);
          };
      &lt;/script&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p></p>