title: Show div only if specific other divs have been clicked
body: <p>I am new to jQuery (this is my second attempt). I looked for answers via Google and StackOverflow and I have tried quite a few but have yet to figure out the last part of my problem. Any help or guidance is most appreciated.</p>
  
  <p>What I want to do is have a bunch of images(apple, pumpkin, candle, etc) that when clicked, fade the image out and then cross off the image's name in a text list. Then, if you click on specific sets of those images they will show a div containing a deal. </p>
  
  <p><em>An example:</em> If you click on the images of apple, pear and pumpkin (in any order) a deal will show.
  <em>Another example:</em> You click on the images of candle, apple, pumpkin and key(in any order) a deal will show.
  Another example: You click on all image items(in any order) a deal shows.</p>
  
  <p>I have the first part working (click on an image, it fades out and crosses its name off the list). </p>
  
  <p>What I need help with is checking to see if certain combinations of images have been clicked and if so show the deal div.</p>
  
  <p>I was thinking I could use index for this but I haven't been able to make it work. Maybe there is a better way? Thanks for any guidance.</p>
  
  <p>Here is my test code so far (<a href="http://jsfiddle.net/gudinne/2QkXh/12/">JSFIDDLE</a>):</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="pic1"&gt;
      &lt;img width="50" height="50" src="http://us.123rf.com/400wm/400/400/chudtsankov/chudtsankov1208/chudtsankov120800002/14670247-cartoon-red-apple.jpg" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="pic2"&gt;
      &lt;img width="50" height="50" src="http://www.in.gov/visitindiana/blog/wp-content/uploads/2009/09/pumpkin.gif" /&gt;
      &lt;/div&gt;
      &lt;div class="pic3"&gt;
      &lt;img width="50" height="50" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Candle_icon.png" /&gt;
      &lt;/div&gt;
      &lt;div class="pic4"&gt;
      &lt;img width="50" height="50" src="http://tasty-dishes.com/data_images/encyclopedia/pear/pear-06.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="pic5"&gt;
      &lt;img width="50" height="50" src="http://free.clipartof.com/57-Free-Cartoon-Gray-Field-Mouse-Clipart-Illustration.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="pic6"&gt;
      &lt;img width="50" height="50" src="http://images.wisegeek.com/brass-key.jpg" /&gt;
      &lt;/div&gt;
      &lt;div id="items"&gt;
      &lt;p class="apple"&gt;Apple&lt;/p&gt;
      &lt;p class="pumpkin"&gt;Pumpkin&lt;/p&gt;
      &lt;p class="candle"&gt;Candle&lt;/p&gt;
      &lt;p class="pear"&gt;Pear&lt;/p&gt;
      &lt;p class="mouse"&gt;Mouse&lt;/p&gt;
      &lt;p class="key"&gt;Key&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="someText"&gt;Reveal Deal #1 after finding apple, candle and mouse&lt;/div&gt;
      &lt;div class="deal1"&gt;This is deal box #1! You must have found apple, candle and mouse! WIN&lt;/div&gt;
      &lt;div class="someText"&gt;Reveal Deal #2 after finding key, pumpkin, pear and mouse!&lt;/div&gt;
      &lt;div class="deal2"&gt;This is deal box #2! You must have found key, pumpkin, pear and mouse!&lt;/div&gt;
      &lt;div class="someText"&gt;Reveal Deal #3 after finding ALL objects!&lt;/div&gt;
      &lt;div class="deal3"&gt;This is deal box #3! You must have ALL the items!&lt;/div&gt;
      &lt;div id="output"&gt;&lt;/div&gt;`
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.intro, .someText {
          color:#333;
          font-size:16px;
          font-weight: bold;
      }
      .deal1, .deal2, .deal3 {
          font-size: 18px;
          color: red;
      }
  </code></pre>
  
  <p>Javascript: jQuery</p>
  
  <pre><code>$(document).ready(function () {
  
      $('.deal1, .deal2, .deal3').hide();
  
      $('.pic1').click(function () {
          $(this).data('clicked');
          $('#items p.apple').wrap('&lt;strike&gt;');
          $(".pic1").fadeOut("slow");
      });
  
      $('.pic2').click(function () {
          $(this).data('clicked');
          $("#items p.pumpkin").wrap("&lt;strike&gt;");
          $(".pic2").fadeOut("slow");
      });
  
      $('.pic3').click(function () {
          $(this).data('clicked');
          $("#items p.candle").wrap("&lt;strike&gt;");
          $(".pic3").fadeOut("slow");
      });
  
      $('.pic4').click(function () {
          $(this).data('clicked');
          $("#items p.pear").wrap("&lt;strike&gt;");
          $(".pic4").fadeOut("slow");
      });
  
      $('.pic5').click(function () {
          $(this).data('clicked');
          $("#items p.mouse").wrap("&lt;strike&gt;");
          $(".pic5").fadeOut("slow");
      });
  
      $('.pic6').click(function () {
          $(this).data('clicked');
          $("#items p.key").wrap("&lt;strike&gt;");
          $(".pic6").fadeOut("slow");
  });
  
  $(document).on('click', '*', function (e) {
          e.stopPropagation();
          var tag = this.tagName;
          var index = $(tag).index(this); // doesn't work, as it gives the total no. elements
  
          $('#output').html(index);
      });
  
  });
  </code></pre>