title: onclick event on document.getElementsByClassName is been applied to all the elements at the same time
body: <p>Please help. I am trying to stop the click event on the play button from applying to all the div at the same time. I want the click event to only apply to the div that's been clicked on. Please see code below for what I have so far. I am using vanilla Javascript.    </p>
  
  <pre><code> &lt;style&gt;
                  div{
                      width: 200px;
                      height: 200px;
                      border: 1px solid black;
                  }
                  .secondview{
                      background-color: blue;
                  }
                  .firstview{
                      visibility: hidden;
                      background-color: red; 
                  }
          &lt;/style&gt;
          &lt;div class="secondview"&gt;
              &lt;button class="play"&gt; Play &lt;/button&gt;
              &lt;div class="firstview"&gt; 
                  &lt;p&gt;Play this game &lt;/p&gt; 
                  &lt;button id="submit"&gt; Submit &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="secondview"&gt;
              &lt;button id="btn" class="play"&gt; Play &lt;/button&gt;
              &lt;div class="firstview"&gt; 
                  &lt;p&gt;Play this game &lt;/p&gt; 
                  &lt;button id="submit"&gt; Submit &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="secondview"&gt;
              &lt;button class="play"&gt; Play &lt;/button&gt;
               &lt;div class="firstview"&gt; 
                  &lt;p&gt;Play this game &lt;/p&gt; 
                  &lt;button id="submit"&gt; Submit &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;script&gt;
          var playBtn = document.getElementsByClassName("play");
              for (var i=0; i&lt;playBtn.length; i++){
                  playBtn[i].addEventListener("click", showQuestion)
              }
          var question = document.getElementsByClassName("firstview");
              function showQuestion (){
                  for(j=0; j&lt;question.length; j++){
                      question[j].style.visibility = "visible";
                  }
              }
      &lt;/script&gt;
  </code></pre>