title: Building quiz in Javascript: Select only one of dynamic elements plus the ability to change choice
body: <p>I try to build a quiz of 30 questions with dynamically generated elements.</p>
  <p>The html:</p>
  <pre><code>  &lt;div class=&quot;secondBox&quot;&gt;
             &lt;div class=&quot;questionBox&quot;&gt;
             &lt;/div&gt;
              
    &lt;/div&gt;
  
  </code></pre>
  <p>Here's my script:</p>
  <pre><code>
  function showQuestion(){
      for(let i = 0; i &lt; QuesPartA.length; i++){
        $(&quot;.questionBox&quot;).append('&lt;div class=&quot;Question&quot;&gt;Number '+ parseInt(i+1) +'&lt;/div&gt;');
        QuesPartA[i]['option'].forEach(option =&gt; {
            $(&quot;.questionBox&quot;).append('&lt;span class=&quot;pilihan&quot;&gt;'+option +' &lt;/span&gt;&lt;br&gt;');  
        });
       
    } 
  
  $(&quot;.secondBox&quot;).append('&lt;a href=&quot;Listening Part A.html&quot; class=&quot;btnToPartB&quot;&gt;Continue to Part B&lt;/a&gt;');
    };
  
  $(&quot;.questionBox&quot;).on(&quot;click&quot;, &quot;.pilihan&quot;, function() {
    $(this).css(&quot;background&quot;, &quot;red&quot;);
    $('.pilihan').not(this).css(&quot;background&quot;, &quot;#ccc&quot;);
  </code></pre>
  <p>So the dynamically generated element will show 30 questions with four answer options each. I want to change the color of the option to be red once the user clicks, plus with the ability to change choice.</p>
  <p>I can do that with the code above: I can choose an answer for question number 1 (one of the options change to red), but when I click an answer for number 2, the chosen option in question 1 goes back to <code>#ccc</code> color. It goes the same way when I choose an option in question 3, the chosen answers for number 2 and 1 go back to <code>#ccc</code>.</p>
  <p>Does anyone have any ideas so that everytime I click an answer for the next question the previous ones remain red?</p>
  <p>Thanks in advance.</p>