Trato de construir un cuestionario de 30 preguntas con elementos generados dinámicamente.

el html:

 <div class="secondBox"> <div class="questionBox"> </div> </div>

Aquí está mi guión:

 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", ".pilihan", function() { $(this).css("background", "red"); $('.pilihan').not(this).css("background", "#ccc");

Entonces, el elemento generado dinámicamente mostrará 30 preguntas con cuatro opciones de respuesta cada una. Quiero cambiar el color de la opción para que sea rojo una vez que el usuario haga clic, además de poder cambiar la elección.

Puedo hacerlo con el código anterior: puedo elegir una respuesta para la pregunta número 1 (una de las opciones cambia a rojo), pero cuando hago clic en una respuesta para la número 2, la opción elegida en la pregunta 1 vuelve al color #ccc . Sucede lo mismo cuando elijo una opción en la pregunta 3, las respuestas elegidas para el número 2 y 1 vuelven a #ccc .

¿Alguien tiene alguna idea para que cada vez que haga clic en una respuesta para la siguiente pregunta, las anteriores permanezcan en rojo?

Gracias por adelantado.