How to change the color only the clicked element of many iterated dynamic elements-CodePudding

I'm trying to change the background color of dynamic html elements (span) to be red when user clicks them.

function showQuestion(){
    for(let i = 0; i < QuesPartA.length; i  ){
      $(".questionBox").append('<div class="Question">Number '  parseInt(i 1)  '</div>');
      QuesPartA[i]['option'].forEach(option => {
          $(".questionBox").append('<span class="pilihan">' option  ' </span><br>');  
      });
  } 

$(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>');
  };

But I want only the one clicked that changes color, not all span.pilihan. I have tried some ways, but it ended up either changing all spans to be red or not changing at all. Any ideas how to do it effectively?

Thanks in advance.

CodePudding user response：

You can use jQuery events to get the element of click.
Like below:

$(() => {
 generateQuestion(1);
});

var q = 1;

function generateQuestion(num) {
  var question = document.createElement("span");
  question.innerHTML = "Question "   num;
  document.body.append(question);
}

$("body").on("click", "span", function(){
  $(this).css("background", "red");
  q  ;
  generateQuestion(q);
});

span {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Edit: now delegate