title: How can i check if multiple divs have been clicked in JS?
body: <p>I'm trying to "track" if all divs have been clicked. If all divs have been clicked something should happen. This can only happen when all divs have been clicked.</p>
  
  <p><a href="http://jsbin.com/cawukapumi/1/" rel="nofollow">http://jsbin.com/cawukapumi/1/</a>
  This is what i've gathered so far. 
  Any help is more then appreciated. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $(".masterobject").click(function() {
      $(this).data('clicked, true');
                   });
      
  
  if ($('#obj1').data('clicked') &amp;&amp; $('#obj2').data('clicked') &amp;&amp; $('#obj3').data('clicked') &amp;&amp; $('#obj4').data('clicked') &amp;&amp; $('#obj5').data('clicked') ) {
      console.log( "all has been clicked" );
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.masterobject {
  position: absolute;
  background-color: red;
  z-index: 2;
  }
  
  #obj1 {
  width: 50px;
  height: 60px;
  top: 25%;
  left: 19%;
  
  }
  
  #obj2 {
  width: 150px;
  height: 100px;
  top: 12%;
  left: 84%;
  }
  
  #obj3 {
  width: 80px;
  height: 80px;
  top : 66%;
  left : 73%;
  }
  
  #obj4 {
  top: 54%;
  left: 28%;
  width: 60px;
  height: 70px;
  
  }
  
  #obj5 {
  width: 100px;
  height: 100px;
  top: 45%;
  right: 13%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="masterobject" id="obj1"&gt;&lt;/div&gt;
      &lt;div class="masterobject" id="obj2"&gt;&lt;/div&gt;
      &lt;div class="masterobject" id="obj3"&gt;&lt;/div&gt;
      &lt;div class="masterobject" id="obj4"&gt;&lt;/div&gt;
      &lt;div class="masterobject" id="obj5"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>