title: jquery loop for div
body: <p>I have the following code in repeat. </p>
  
  <pre><code>&lt;div class="background1"&gt;&lt;/div&gt;
  
   &lt;i class="fa fa-share" alt="share"  title="Share"&gt;&lt;/i&gt;
   &lt;div class="large1"&gt;
        &lt;div class="ttip"&gt;
            &lt;div&gt;Here goes contents...&lt;/div&gt;
                &lt;span class="note"&gt;(click here to close the box)&lt;/span&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want to display the div with class large1 and the background. This is the <a href="http://jsfiddle.net/rjGeS/83/" rel="nofollow">code</a> (not mine. found it on net) in repeat.</p>
  
  <p>I tried to do the following in java-script</p>
  
  <pre><code>$('.fa-share').click(function (){
                      $(this).next(".large1").first().html(function() {
                                  $(this).prev(".background1").css({"opacity": "0.3"}).fadeIn("slow");
                                  $(this).next('.ttip').css({left: $(this).position() + '20px',top: $(this).position() + '50px'}).show(500)
                      }).fadeIn("slow");
  
                      $(this).next('.note').on('click', function() {
                          $(this).prev('.ttip').hide(500);
                          $(this).prev(".background1").fadeOut("slow");
                          $(this).prev(".large1").fadeOut("slow");
                      });
                  });
  </code></pre>
  
  <p>I had tried using ".each()" on first click but did not work. Thanks in advance. </p>