title: Jquery - Open .next
body: <p>I am trying to create a script that only opens the next div called .video-overlay. 
  I do not want to use ID's as there could be up to 30 videos per page. </p>
  
  <p>JS Fiddle: <a href="https://jsfiddle.net/w2fqrzbw/" rel="nofollow noreferrer">https://jsfiddle.net/w2fqrzbw/</a></p>
  
  <p>At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="video-trigger"&gt;Button 1 &lt;/span&gt;
  &lt;!-- Close video trigger--&gt;
  
  &lt;div class="video-overlay"&gt;
      &lt;div class="overlay-close"&gt;Close&lt;/div&gt;
      &lt;div class="container"&gt;
        Popup 1
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Close video popup--&gt;
  
  
  &lt;br&gt;&lt;br/&gt;
  &lt;br&gt;&lt;br/&gt;
  &lt;br&gt;&lt;br/&gt;
  
  
  
  &lt;span class="video-trigger"&gt;Button 2&lt;/span&gt;
  &lt;!-- Close video trigger--&gt;
  
  &lt;div class="video-overlay"&gt;
      &lt;div class="overlay-close"&gt;Close&lt;/div&gt;
      &lt;div class="container"&gt;
        Popup 2
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Close video popup--&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>//Video popup
      $(document).ready(function() {
          $('.video-trigger').click(function() {
              $('.video-overlay').fadeIn(300);
              $('.video-overlay video').get(0).play();
  
          });
          $('.video-overlay .overlay-close').click(function() {
              $('.video-overlay').fadeOut(300);
              $('.video-overlay video').get(0).pause();
          });
      });
  </code></pre>
  
  <p>This is how it is laid out in my actual web document:</p>
  
  <pre><code>&lt;div class="col span_6_of_12 ripple-me"&gt;
                              &lt;div class="video-thumbnail" style="background-image: url(&lt;?php echo $video_thumbnail; ?&gt;);"&gt;
                                  &lt;span class="video-trigger"&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                              &lt;!--Close Video box cta --&gt;
  
                              &lt;div class="video-overlay"&gt;
                                  &lt;div class="overlay-close"&gt;Close&lt;/div&gt;
                                  &lt;div class="container"&gt;
                                      &lt;iframe allowFullScreen='allowFullScreen' src="&lt;?php echo $video_link; ?&gt;" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"&gt;&lt;/iframe&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- Close video popup--&gt;
  
                          &lt;/div&gt;
  </code></pre>