title: UPDATE Javascript document.querySelector | Only first Object works
body: <p>so heres an Update on my Code:
  My Code now is not bad, the effect on Container works but the other ones don't do you have some Ideas? :) I want to select all Elements which have these classes.</p>
  <pre><code>    //Movement Animation to happen
  const card = document.querySelectorAll(&quot;.card&quot;);
  const container = document.querySelectorAll(&quot;.container&quot;);
  //Items
  const title = document.querySelector(&quot;.title&quot;);
  const cap = document.querySelector(&quot;.cap img&quot;);
  const sizes = document.querySelector (&quot;.sizes&quot;);
  const description = document.querySelector(&quot;.info h3&quot;);
  const purchase = document.querySelector(&quot;.purchase button&quot;);
  
  //Moving Animation Event
  for (let i = 0; i &lt; container.length; i++){
  container[i].addEventListener(&quot;mousemove&quot;, (e) =&gt; {
      let xAxis = (window.innerWidth / 3 - e.pageX) / 100;
      let yAxis = (window.innerHeight / 2 - e.pageY) / 100;
      card[i].style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
    });
  }
  
    //Animate In
    for (let i = 0; i &lt; container.length; i++) {
  container[i].addEventListener(&quot;mouseenter&quot;, (e) =&gt; {
      card[i].style.transition = &quot;none&quot;;
      //PopOut
      title[i].style.transform = &quot;translateZ(150px)&quot;;
      cap[i].style.transform = &quot;translateZ(150px) rotateZ(-25deg)&quot;;
      sizes[i].style.transform = &quot;translateZ(100px)&quot;;
      description[i].style.transform = &quot;translateZ(125px)&quot;;
      purchase[i].style.transform = &quot;translateZ(75px)&quot;;
  });}
  
    //Animate Out
    for (let i = 0; i &lt; container.length; i++) {
    container[i].addEventListener(&quot;mouseleave&quot;, (e) =&gt; {
      card[i].style.transition = &quot;all 0.5s ease&quot;;
      card[i].style.transform = `rotateY(0deg) rotateX(0deg)`;
      //PopBack
      title[i].style.transform = &quot;translateZ(0px)&quot;;
      cap[i].style.transform = &quot;translateZ(0px) rotateZ(0deg)&quot;;
      sizes[i].style.transform = &quot;translateZ(0px)&quot;;
      description[i].style.transform = &quot;translateZ(0px)&quot;;
      purchase[i].style.transform = &quot;translateZ(0px)&quot;;
    });}
  
    
  </code></pre>