title: Using getElementBy to control one element at a time
body: <p>I am trying to have users click a play button, watch a case study video, and have the video go back to its original state once done playing. The issue is that when adding multiple case studies on one page the <code>getElementById()</code>, not only is invalid HTML, but it also plays the wrong case study video or it won't play at all.</p>
  <p>I read online that <code>getElementsByName</code> or <code>getElementsByClassName</code> could be an alternative, but I can't get them to work.</p>
  <p><strong>Case study HTML block (this gets repeated on the page)</strong></p>
  <pre><code>&lt;div class=&quot;caseStudy&quot;&gt;
    &lt;button id=&quot;playButton&quot;&gt;&lt;/button&gt;
    &lt;div id=&quot;casestudyPoster&quot; class=&quot;caseStudy_poster&quot;&gt;&lt;/div&gt;
    
    &lt;iframe class=&quot;caseStudy_video&quot; src=&quot;&lt;vimeo-url-here&gt;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;
    &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JavaScript:</strong></p>
  <pre><code>  var poster = document.getElementById(&quot;casestudyPoster&quot;);
    var button = document.getElementById(&quot;playButton&quot;);
      
    poster.onclick = function() { fadeImage() };
    button.onclick = function() { fadeImage() };
  
    function fadeImage() {
      poster.style.visibility = &quot;hidden&quot;;
      button.style.visibility = &quot;hidden&quot;;
      var iframe = document.querySelector('iframe');
      var player = new Vimeo.Player(iframe);
      player.play();
    
      player.on('ended', function(data){
      poster.style.visibility = &quot;visible&quot;;
      button.style.visibility = &quot;visible&quot;;
      });
    
    }
  </code></pre>
  <p>How can I get this JavaScript to work with multiple <code>caseStudy</code>s?</p>