title: jquery counter - allow multiple clicks on li but only count once
body: <p>I am making a mini-game like a hidden object. I am novice at jQuery.
  I have a list of items that represent images on a page. When a hint is needed to find an item, the list item can be clicked and it will start an animation to show where the object of the same name is. There is a counter for 3 hints. This all works.</p>
  
  <p>The issue I am having is that if you click on the same list item multiple times it uses up the three hints. How would I get the counter to only count each list item once? So, in other words, you could click the same item on the list multiple times but it would only reduce the counter by one. Then if you clicked a different list item it would reduce the counter again by one.</p>
  
  <p>Here is jsfiddle: <a href="http://jsfiddle.net/gudinne/ej4mLoze/" rel="nofollow">http://jsfiddle.net/gudinne/ej4mLoze/</a></p>
  
  <p>Thanks for any guidance!</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// hintCounter of 3 counts down to 0 and changes behaviors
  var hintCounter = 3;
  
  $('.itemList li').on('click', function () {
     // check if has hints
     if (hintCounter &gt; 0) {
         hintCounter--;
  
  $('.xHints').html(hintCounter + ' Hints');
     } else {
         // else show the message out of hints
         $('.directions').html('Sorry you are all&lt;br /&gt; out of hints. &lt;br /&gt;Keep Searching!');
     }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="itemWrapper"&gt;
  &lt;ul class="itemList"&gt;
      &lt;li class="baseball"&gt;Baseball&lt;/li&gt;
      &lt;li class="bacon"&gt;Bacon&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="hintBox"&gt; &lt;span class="youHave"&gt;You Have&lt;/span&gt;
   &lt;span class="xHints"&gt;3 Hints&lt;/span&gt;
  
      &lt;p class="directions"&gt;Use a hint by clicking on a name in the list.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS</p>
  
  <pre><code> .itemWrapper {
     border: 2px solid;
     width: 400px;
     height: 271px;
     white-space: normal;
     position: relative;
   }
   .itemList {
     margin: 0;
     padding: 45px 55px;
   }
   .itemList li {
     list-style-type: none;
     position: relative;
     cursor: pointer;
     text-transform: uppercase;
     font-size: 20px;
     text-align: center;
   }
   #hintBox {
     width: 300px;
     margin: 0 auto;
     text-align:center;
     color: blue;
   }
   .xHints {
     font-weight: bold;
   }
  </code></pre>