I'm trying to change the background color of dynamic html elements, but the console shows 'Uncaught TypeError: Cannot set properties of undefined'.

Here's my full JS code:

 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>');
};

$(".questionBox").on("click", "span.pilihan", function() {
  const choice = document.getElementsByClassName(".pilihan")
  choice.style.backgroundColor = "red";
});

I want to change the background color of .pilihan to be red when the user clicks, but such message appear on the console. Is this because the .pilihan is a dynamic element?

I appreciate every help.