title: The values in my array will not render in the DOM
body: <p>The array shows up when I console.log it, but when i try anything else (alert with array and key, or just appending it) only undefined shows up.  In this case, what actually shows up on my screen is:  checkbox undefined button</p>
  
  <pre><code>&lt;body&gt;
  &lt;input id="text-field-input" type="text" placeholder="what do you have to do?"/&gt;
  &lt;button id="submit"&gt;submit&lt;/button&gt;
  &lt;ul id="list-section"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>var toDoList = [];
  
  function addInputToList(todoinput, checkchecked) {
      toDoList.push({todo : todoinput, checked : checkchecked});
  };
  
  function renderToDos() {
      $('#list-section').append('&lt;input type="checkbox"&gt;' + toDoList.todo + ' ' + '&lt;button&gt;x&lt;/button&gt;');
  };
  
  $('#submit').on('click', function() {
      var textFieldInput = $('#text-field-input').val().toLowerCase();
  
      addInputToList(textFieldInput, false);
      renderToDos();
  });
  </code></pre>