title: dynamically populate div with object
body: <p>I would like to populate a div with an id of questions with the 4 trivia questions and the answers with a for loop. Unfortunately, as I have it now my code only puts question 4 with it's answers to the div any idea on what I am doing wrong would be much appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var trivia = [{
      question: "01. What is CSS?",
      answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
      correctAnswer: 0
    },{
      question: "02. Q2?",
      answers: ["1", "2", "3", "4"],
      correctAnswer: 1
    },{
      question: "03. Q3?",
      answers: ["1", "2", "3", "4"],
      correctAnswer: 3
    },{
      question: "04. Q4?",
      answers: ["1", "2", "3", "4"],
      correctAnswer: 3
    }];
  
    $("#startButton").on('click', function populate() {
      var testDiv = document.createElement("div");
      for (var i = 0; i &lt; trivia.length; i++) {
        testDiv.innerHTML = '&lt;h3&gt;' + trivia[i].question + '&lt;/h3&gt;' + '&lt;div&gt;&lt;form&gt;&lt;p&gt;&lt;input type="radio" name="answer" value="right"&gt;' +
        trivia[i].answers[0] + '&lt;/p&gt;' +
          '&lt;p&gt;&lt;input type="radio" name ="answer" value="2"&gt;' + trivia[i].answers[1] + '&lt;/p&gt;' +
          '&lt;p&gt;&lt;input type="radio" name ="answer" value="3"&gt;' + trivia[i].answers[2] + '&lt;/p&gt;' +
          '&lt;p&gt;&lt;input type="radio" name ="answer" value="4"&gt;' + trivia[i].answers[3] + '&lt;/p&gt;' +
          '&lt;p&gt;&lt;/form&gt; &lt;/div&gt;';
      }
      var questionsDiv = document.getElementById('questions');
      questionsDiv.appendChild(testDiv);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="questions"&gt;&lt;/div&gt;
  
  &lt;button id="startButton" type="button"&gt;Start&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>