Question: I am currently doing a personality quiz which pushes an answer value into an array in which later I would count the different answer values to determine what personality trait the user has the most/least.

However, when the answer value of an option gets pushed into the array it is *undefined*. What is the problem?

HTML:

```
<ul data-quiz-question="1">
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li>
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li>
</ul>
<ul data-quiz-question="2">
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li>
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li>
</ul>

```

js:

```
var ansBank = [];

$('ul[data-quiz-question]').each(function(i){
    var $this = $(this),
        chosenAnswer = $this.find('.quiz-answer.active').data('quiz-answer');

    $this.click(function(){
        console.log("Chosen option has been pushed.");
        ansBank.push(chosenAnswer);
    });
}); 

```

Answer: 
```js
var ansBank = [];

$('ul[data-quiz-question]').click(function(e){
  var target = $(e.target)
  if(target.hasClass('quiz-answer')){
      ansBank.push(target.data('quiz-answer'));
      console.log("Chosen option has been pushed.");
      console.log(ansBank)
  }
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-quiz-question="1">
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li>
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li>
</ul>
<ul data-quiz-question="2">
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li>
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li>
</ul>
```
You must add class value in ul tag like this

```
<ul class="data-quiz-question" data-quiz-question="1">

```