title: jQuery - Increment number every second but onclick decrease
body: <p>So I am trying to increase a number every second. So far this works fine but I have an additional condition that doesn't really works and I don't know why.</p>
  
  <p>What I want is that after the value hits 10 or more you can click on a div and something happens with that div but also the value decreases by 10. 
  My Code:</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 counter = 0;
  var increment = 10;
  var div = document.getElementById('number');
      var st = setInterval(function(){
      div.innerHTML = ++counter;
      if (counter &gt;= 10){
          jQuery('#red-block').click(function(e) {  
              jQuery(this).css('border-radius','15px');
              counter = counter -10;
          });
      }
    },1000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#red-block {
    height: 40px;
    width: 40px;
    background-color: #ff0000;
    display:block;
  }</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 id="number"&gt;1&lt;/div&gt;
  
  &lt;div id="red-block"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that after the counter hits 10 I click, the div changes but the value jumps for example to -17 and also I can click on the div as many times as I want and every times it decreases a big amount. This should only be possible each time the counter hits 10. Anybody has a solution for me what I am doing wrong? I believe it has something to do with <code>setInterval</code></p>