jQuery - Having the same HTML twice renders my script inoperative

I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as

$(this).children()

but I can't seem to get any to work. Any help would be much appreciated.

Thank you

jQuery

 $(document).ready(function() {
   $('.apple').click(function() {
     $('#darken').addClass('dark');
     $('.project-info').delay('1000').slideDown('slow');  
     $('.project-images').delay('1000').fadeIn('slow');
   });
 });

  $(document).ready(function() {
    $('.close').click(function() {
        $(".project-info, .project-images").fadeOut('slow');
    });
  });

HTML

    <div class="apple">
      <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    </div>

        <div class="project-info" style="display:none;">
          <div class="project-title">
            <h1>hello world</h1>
          </div>

          <div class="details">
            <p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>

          <div class="links">
            <a href="#">link</a>
          </div>

          <div class="close"></div>
        </div><!-- end of project info -->



      </div>
      <div class="project-images" style="display:none;">
      <div class="-images">
        <img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
        <img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
      </div>

      <div class="close end"></div>
    </div> <!-- Project Images -->

  </div> <!-- # Darken -- >

Solution

You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:

<!--PORTFOLIO ITEM-->
<div class="apple">
    <!-- ICON GOES HERE-->
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>

    <!-- PROJECT INFO GOES HERE-->
    <div class="project-info" style="display:none;">

    </div>
    <!-- PROJECT IMAGES GOES HERE-->
    <div class="project-images" style="display:none;">
    </div>
</div>

I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:

$('.project-info').delay('1000').slideDown('slow');  
$('.project-images').delay('1000').fadeIn('slow');

to this:

$(this).children('.project-info').delay('1000').slideDown('slow');  
$(this).children('.project-images',this).delay('1000').fadeIn('slow');

If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/