Make my product rotate when hover with javascript

Question

Hello I need help I want to make my product rotate when hover. The problem only the first item is rotation when hovering other elements. I tried a foreach loop but seems there is a probleme with my code

$(document).ready(function() {
// DOM Element selections
var cardWrapper = document.querySelectorAll(".product-card");

cardWrapper.forEach(function(cardWrapper) {
    var card = document.querySelector(".product-card__image");

    // highest values for angle
    var mostX = 10; // 10 or -10
    var mostY = 10; // 10 or -10

    cardWrapper.addEventListener("mousemove", (e) => {
        // remove transition
        card.style.transition = "none";


        var x = e.offsetX;
        var y = e.offsetY;
        var {
            width,
            height
        } = cardWrapper.getBoundingClientRect();
        var halfWidth = width / 2;
        var halfHeight = height / 2;

        // calculate angle
        var rotationY = ((x - halfWidth) / halfWidth) * mostX;
        var rotationX = ((y - halfHeight) / halfHeight) * mostY;

        // set rotation
        //card.style.transform = `rotateY(${rotationY}deg) rotateX(${rotationX}deg)`;
        card.style.transform = `rotateY(0deg) rotateX(0deg) rotateZ(-20deg) scale(1.2)`;

    });

    cardWrapper.addEventListener("mouseleave", () => {
        // add transition back
        card.style.transition = "transform 0.5s ease-in-out";
        card.style.transform = `rotateY(0) rotateX(0)`;
    });

});

});