title: image click counter event listener issues
body: <p>So I'm creating a "Cat Clicker" for a project in my Udacity course. Basically, we have 5 pictures of cats (I currently have 4), but each cat image should have its own click counter for when the specific image is clicked. I know there's a way to use one <code>for</code> loop, but not sure how. I've been trying to just use an <code>addeventlistener</code> for each individual image, however it's counting every click (no matter where) on the page...can someone figure out what I'm missing/doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var sassy = document.createElement("img");
  sassy.src = 'images/cat.jpg';
  sassy.height = "500";
  sassy.width = "640";
  sassy.alt = "Sassy Cat";
  document.getElementById("catimage").appendChild(sassy);
  
  var addUp = (function() {
    var count = 0;
    return function() {
      var sassy = document.getElementById("catimage");
      if (sassy) sassy.innerHTML = "Picture Clicks: " + ++count;
    }
  }());
  document.addEventListener("click", addUp, false);
  
  var grumpy = document.createElement("img");
  grumpy.src = 'images/grumpy-cat.jpg';
  grumpy.height = "500";
  grumpy.width = "640";
  grumpy.alt = "Grumpy Cat";
  document.getElementById("grumpyimage").appendChild(grumpy);
  
  var cuddlecats = document.createElement("img");
  cuddlecats.src = 'images/cuddles.jpg';
  cuddlecats.height = "500";
  cuddlecats.width = "640";
  cuddlecats.alt = "Cuddling Cats";
  document.getElementById("cuddlingcats").appendChild(cuddlecats);
  
  var sketchy = document.createElement("img");
  sketchy.src = 'images/sketchycat.jpg';
  sketchy.height = "500";
  sketchy.width = "640";
  sketchy.alt = "Sketchy Cat";
  sketchy.co
  document.getElementById("sketchycat").appendChild(sketchy);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="catimage"&gt;
    &lt;figcaption&gt;Sassy Cat&lt;/figcaption&gt;
    &lt;h3 id="sassycount"&gt;Picture Clicks: 0&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div id="grumpyimage"&gt;
    &lt;figcaption&gt;Grumpy Cat&lt;/figcaption&gt;
    &lt;h3 id="grumpycount"&gt;Picture Clicks: 0&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="cuddlingcats"&gt;
    &lt;figcaption&gt;Cuddling Cats&lt;/figcaption&gt;
    &lt;h3 id="cuddlecount"&gt;Picture Clicks: 0&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="sketchycat"&gt;
    &lt;figcaption&gt;Sketchy Cat&lt;/figcaption&gt;
    &lt;h3 id="sketchcount"&gt;Picture Clicks: 0&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>