<div class="slide"> <div class="ques-container" id="container"> <div class="reveal-btn"> <a id="btn"><i class="far fa-eye"></i></a> </div> <div class="ques active"> <p>QUES</p> </div> <div class="answer"> <p id="para"> 1) for(let i=1;i<=100;i++)<br> 2) if(i%3==0 && i%5==0): console.log("FIZZBUZZ")<br> 3) else if(i%3==0): console.log("FIZZ")<br> 4) else if(i%5==0): console.log("BUZZ")<br> 5) else: console.log(i)<br> </p> </div> </div>

Blockquote Esto es lo que estoy tratando de hacer en javascript, el problema es que funciona solo para la primera pregunta. Cómo orientar cada diapositiva y hacer clic en cambiar solo su propiedad respectiva =>

 const reveal = document.querySelector(".reveal-btn"); const text = document.querySelector(".ques"); const main = document.querySelector(".main") const ans = document.querySelector(".answer"); const container = document.getElementById("container"); const paragraph = document.getElementById("para"); slides.forEach(function(slide){ reveal.addEventListener('click',function(){ console.log(reveal) text.classList.toggle("active"); if(text.classList != "ques active"){ reveal.innerHTML = "<i class=\"fas fa-eye-slash\"></i>" ans.classList.add("show"); container.style.backgroundColor = "#17B978"; paragraph.style.color = "white"; reveal.style.color="white"; } else{ reveal.innerHTML= "<i class=\"far fa-eye\"></i>"; ans.classList.remove("show"); container.style.backgroundColor = "#C9D6DF"; reveal.style.color="#52616B" } }); })