Problem with event handlers and DOM [SOLVED]

Question

https://drive.google.com/file/d/1Y1FPxcNWdv2IUTHSUmfjbvlUWCf_L8lp/view?usp=drivesdk
This is a link to the video of my problem

Here is the code

JS

var page = document.querySelectorAll(".details"); var btn = document.querySelectorAll("button"); var book = document.querySelector(".card"); var place = 0;

for(var i = 0; i < btn.length; i++){     
place = i;     btn[i].addEventListener("click", function(){
page[place].style.transform = "rotateY(-135deg)";     });
}
book.addEventListener("mouseleave", function(){
for(var i = 0; i < page.length; i++){
page[i].style.transform = "";
}
});

The first button worked fine
But other buttons are not working
Please tell me a solution for it.
You can Debug at Codepen https://codepen.io/sarthakg043-the-selector/pen/jOOVyNQ

Answer 1

https://code.sololearn.com/WFM0OdR6Hf1B/#js

Answer 2

For the sake of learning and for others who will read and may find this useful later on, would you mind to explain about the fix please Mohamed ELomari
Thanks a bunch 👍

Answer 3

Mohamed ELomari Thank you so much sir.😇

Answer 4

Ipang that's not a big deal.
I found a new and more easy fix.
Just replace var with let in the previous code and everything will go well.