Q:

Attempting to dynamcially append innerText to label elements from array

I am working on my second ever Javascript project. As you can imagine, since I am still finding my feet with building projects, there are quite a few errors which I am running into (and learning from).
Let me just quickly explain what stage I am at in building the family quiz and what the problem is. I have created an array of objects which stores questions, choices and answers within each index of the array.
When the quiz starts up, there is an intro screen displaying the rules etc. The user then clicks on a "start quiz" button which transitions the screen to the first question.
The user then selects the correct answer and clicks next question. This is the stage I am at currently.
What I am trying to simply do is append the next 'choices' into the label elements. But when I click it nothing happens. Obviously I am doing something wrong. 
Please can someone assist?
Many thanks!
EDIT I have been informed by a response that there was a syntax error in my forEach loop which appends the next 'choices' to the label elements. I have corrected that. However, what I am finding now is that it is only appending the first index value of every 'choices' array to every label button.
$(document).ready(function(){

var azeem = [

{
question: "What is Azeem's favourte color?",
choices: ["blue", "yellow", "red", "green"],
answer: 0
},

{
question: "What is Azeem's favourte movie?",
choices: ["Scarface", "The Terminator", "Shawshank Redemption", "The Dark Knight"],
answer: 3
},
{
question: "What was Azeem's first ever job role?",
choices: ["Cleaner", "Store Assistant", "Sales", "Admin"],
answer: 1
},
{
question: "What is Azeem's favourite dish?",
choices: ["Pasta", "Pizza", "Chips", "Curry"],
answer: 0
},
{
question: "What subject did Azeem enjoy the most in school?",
choices: ["Drama", "Science", "P.E", "History"],
answer: 0
},
{
question: "What subject did Azeem least enjoy in school?",
choices: ["Geography", "Maths", "History", "I.T"],
answer: 1
},
{
question: "Which one of these cities has Azeem travelled to?",
choices: ["Madrid", "Lisbon", "Istanbul", "Dublin"],
answer: 1
},
{
question: "Which college did Azeem study in?",
choices: ["NewVic", "Redbridge", "East Ham", "Barking"],
answer: 3
},
{
question: "Who is Azeem's favourite sports icon?",
choices: ["Eric Cantona", "Muhammad Ali", "Cristiano Ronaldo", "Prince Naseem"],
answer: 1
},
{
question: "Who is Azeem's favourite music artist?",
choices: ["Michael Jackson", "Eminem", "Drake", "Linkin Park"],
answer: 1
},

];

var currentQuestion = 0;
var questionNumberCounter = 1;

var questionNumber = document.getElementById("questionCount");
var choices = document.getElementById("choicesSection");
var questions = document.getElementById("ques");

questions.innerText = azeem[currentQuestion].question;

// The following event listener will transition from the instructions to the first question of the quiz

            document.getElementById("startquiz").addEventListener("click",function(){
$(".quiz-intro").fadeOut(600);
$(".quiz-section").delay(600).slideDown("slow");
questionNumber.innerText = questionNumberCounter;
azeem[currentQuestion].choices.forEach(function(value){
var radio = document.createElement("input");
var label = document.createElement("label");
var div = document.createElement("div");
$(div).addClass("choice");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "answer");
radio.setAttribute("value", value);
var radioID = 'question-'+currentQuestion;
radio.setAttribute('id', radioID) ;
label.setAttribute("for", radioID);
label.innerHTML = value +"<br>";
choices.appendChild(div);
div.appendChild(radio);
div.appendChild(label);

})

})

            document.getElementById("submitanswer").addEventListener("click",function(){
questionNumberCounter++;
questionNumber.innerText = questionNumberCounter;
currentQuestion++
questions.innerText = azeem[currentQuestion].question;
azeem[currentQuestion].choices.forEach(function(value){
var labels = document.getElementsByTagName("label");
var labelCounter = 0;
while (labelCounter < 5){
labels[labelCounter].innerText = value;
labelCounter++;
}

}
})
});

HTML:
<div class="container">

<h1 class="text-center">FAMILY QUIZ</h1>

<h4 class="text-center">YOU HAVE CHOSEN AZEEM!</h4>

<div class="row text-center quizSection">

<div class="col-md-4 image-section">
<img src="images/3.jpg" id="azeem" class="img-responsive img-thumbnail">
</div>

<div class="col-md-8 quiz-intro">

<h2>INSTRUCTIONS</h2>

<ul id="instructions">

<li>This is a multiple choice quiz</li>

<li>There is only one correct answer per question</li>

<li>At the end of the quiz you will be shown your total score which will reflect the amount of questions answered correctly</li>

<li>There are no hints available during the process of the quiz</li>

<li>Click the 'Start Quiz' button to begin</li>

</ul>

<button id="startquiz" class="btn-small btn-success">START QUIZ</button>

</div>

<div class="col-md-8 quiz-section">

<h5>Question <span id="questionCount">1</span> of 15</h5>

<p class="text-center" id="ques"></p>

<div id="choicesSection">

</div>

<input type="submit" id="submitanswer" value="Submit Answer" class="btn-small btn-success">

</div>

</div>

A:

Okay so first things first, you were missing a closing parens ) 
The bigger issue with your code lay within two things. First, this for loop is causing an issue where every choice you iterate over you are renaming every label that name. Why? The code below goes through each choice, sure, but it then loops over every label and redefines the label's text as that choice. Take a look:
azeem[currentQuestion].choices.forEach(function(value) {
    var labels = document.getElementsByTagName("label");
    var labelCounter = 0;
    while (labelCounter < 5) {
        labels[labelCounter].innerText = value;
        labelCounter++;
    }
});

Another thing you'll notice above is that you are specifically saying 5 when really the operand should be checking for an amount that's less than labels.length (this will throw an error, so once we change it we can carry on)
azeem[currentQuestion].choices.forEach(function(value) {
    var labels = document.getElementsByTagName("label");
    var labelCounter = 0;
    while (labelCounter < labels.length) {
        labels[labelCounter].innerText = value;
        labelCounter++;
    }
});

Now you'll see the questions populate with the same possible answer over and over. How do we fix this? Well, first it would pay to get our labels ahead of the loop since the elements themselves aren't being moved or deleted(we're just changing their text property) otherwise we're wasting resources grabbing the same elements over and over again. 
Secondly forEach comes with a handy parameter called index that is automatically supplied to the callback function. a.e. forEach(item, indexOFItem) - this means that we can eliminate your while loop entirely and just change the label corresponding to the index of the choice. 
   var labels = document.getElementsByTagName("label");
   azeem[currentQuestion].choices.forEach(function(value, ind) {
     labels[ind].innerText = value;
   });

Edit As pointed out in the comments, you're also going to want to check if the current question exists before loading it. A quick and dirty test for this with your current code is to simply check if the question exists in your object. There are better ways to make sure. You want to avoid static values when it comes to dynamic objects/arrays. As an example the labels issue above where you had set it to check if it was < 5 (less than 5). We changed this to labels.length to dynamically check the length instead of assuming it would always be 5. In the case of the question number, you have 15 questions stated, but that's not dynamic. A better way would be to check against azeem.length if you know that every object within azeem is a question. However, as I'm not sure, a quick fix is the following:
    if (azeem[currentQuestion]) {
  questions.innerText = azeem[currentQuestion].question;
  var labels = document.getElementsByTagName("label");
  azeem[currentQuestion].choices.forEach(function(value, ind) {

    labels[ind].innerText = value;

  });
} else {
  alert("no more questions");
}

If you change these things the code will run as follows: 

$(document).ready(function() {
  var azeem = [{
    question: "What is Azeem's favourte color?",
    choices: ["blue", "yellow", "red", "green"],
    answer: 0
  }, {
    question: "What is Azeem's favourte movie?",
    choices: ["Scarface", "The Terminator", "Shawshank Redemption", "The Dark Knight"],
    answer: 3
  }, {
    question: "What was Azeem's first ever job role?",
    choices: ["Cleaner", "Store Assistant", "Sales", "Admin"],
    answer: 1
  }, {
    question: "What is Azeem's favourite dish?",
    choices: ["Pasta", "Pizza", "Chips", "Curry"],
    answer: 0
  }, {
    question: "What subject did Azeem enjoy the most in school?",
    choices: ["Drama", "Science", "P.E", "History"],
    answer: 0
  }, {
    question: "What subject did Azeem least enjoy in school?",
    choices: ["Geography", "Maths", "History", "I.T"],
    answer: 1
  }, {
    question: "Which one of these cities has Azeem travelled to?",
    choices: ["Madrid", "Lisbon", "Istanbul", "Dublin"],
    answer: 1
  }, {
    question: "Which college did Azeem study in?",
    choices: ["NewVic", "Redbridge", "East Ham", "Barking"],
    answer: 3
  }, {
    question: "Who is Azeem's favourite sports icon?",
    choices: ["Eric Cantona", "Muhammad Ali", "Cristiano Ronaldo", "Prince Naseem"],
    answer: 1
  }, {
    question: "Who is Azeem's favourite music artist?",
    choices: ["Michael Jackson", "Eminem", "Drake", "Linkin Park"],
    answer: 1
  }, ];
  var currentQuestion = 0;
  var questionNumberCounter = 1;
  var questionNumber = document.getElementById("questionCount");
  var choices = document.getElementById("choicesSection");
  var questions = document.getElementById("ques");
  questions.innerText = azeem[currentQuestion].question;
  // The following event listener will transition from the instructions to the first question of the quiz
  document.getElementById("startquiz").addEventListener("click", function() {
    $(".quiz-intro").fadeOut(600);
    $(".quiz-section").delay(600).slideDown("slow");
    questionNumber.innerText = questionNumberCounter;
    azeem[currentQuestion].choices.forEach(function(value) {
      var radio = document.createElement("input");
      var label = document.createElement("label");
      var div = document.createElement("div");
      $(div).addClass("choice");
      radio.setAttribute("type", "radio");
      radio.setAttribute("name", "answer");
      radio.setAttribute("value", value);
      var radioID = 'question-' + currentQuestion;
      radio.setAttribute('id', radioID);
      label.setAttribute("for", radioID);
      label.innerHTML = value + "<br>";
      choices.appendChild(div);
      div.appendChild(radio);
      div.appendChild(label);
    })
  })
  document.getElementById("submitanswer").addEventListener("click", function() {
    questionNumberCounter++;
    questionNumber.innerText = questionNumberCounter;
    currentQuestion++;
    if (azeem[currentQuestion]) {
      questions.innerText = azeem[currentQuestion].question;
      var labels = document.getElementsByTagName("label");
      azeem[currentQuestion].choices.forEach(function(value, ind) {

        labels[ind].innerText = value;

      });
    } else {
      alert("no more questions");
    }

  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <h1 class="text-center">FAMILY QUIZ</h1>

  <h4 class="text-center">YOU HAVE CHOSEN AZEEM!</h4>

  <div class="row text-center quizSection">


    <div class="col-md-4 image-section">
      <img src="images/3.jpg" id="azeem" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-8 quiz-intro">

      <h2>INSTRUCTIONS</h2>

      <ul id="instructions">

        <li>This is a multiple choice quiz</li>

        <li>There is only one correct answer per question</li>

        <li>At the end of the quiz you will be shown your total score which will reflect the amount of questions answered correctly</li>

        <li>There are no hints available during the process of the quiz</li>

        <li>Click the 'Start Quiz' button to begin</li>

      </ul>

      <button id="startquiz" class="btn-small btn-success">START QUIZ</button>



    </div>

    <div class="col-md-8 quiz-section">

      <h5>Question <span id="questionCount">1</span> of 15</h5>

      <p class="text-center" id="ques"></p>

      <div id="choicesSection">


      </div>

      <input type="submit" id="submitanswer" value="Submit Answer" class="btn-small btn-success">

    </div>

  </div>

