title: How can I properly use '$(this)' to call a DOM element that triggered the event?
body: <p>I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.</p>
  
  <pre><code>&lt;script&gt;
  
    (function($){
  
    var ivid = $('.pretty-embed iframe').attr('src'); 
  
      $(document).ready(function() {
  
            $(".b-close").click(function(e){
            e.preventDefault();
            var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
            var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
            var vidImgUrl = '&lt;img src="'+vidImg+'" width="100%" alt="YouTube Video Preview"&gt;';
            $('.pretty-embed').removeClass('play').empty();
            $('.pretty-embed').html(vidImgUrl);
            $('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
       });
     });
  
   })(jQuery);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked</p>
  
  <pre><code>&lt;div id="element_to_pop_up" display: block;"&gt;
      &lt;a class="b-close"&gt;x&lt;/a&gt;
      &lt;h3 class="pop-hd"&gt;Header&lt;/h3&gt;
       &lt;p&gt;Test Video&lt;/p&gt;
       &lt;div class="pretty-embed play" data-pe-allow-fullscreen="false"&gt;
       &lt;iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&amp;amp;rel=1"&gt;&lt;/iframe&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>