title: jquery stop and reset counter without page reload (setInterval)
body: <p>i have a simple clock that counts the amount of seconds passed for an AJAX call to be completed. Each request takes a different time frame and different requests can be made on the same page without refreshing.</p>
  
  <p>I am using jquery to show a timer of the current request but i cannot figure out a way to clear the timer back to 0 for every new request.</p>
  
  <pre><code>$(document).ready(function(){
      $('#startTimer').click(function(){
      var sec = 0;
      var siID = setInterval(function() {$('#counter span').text(++sec);}, 1000);
      })
  });
  </code></pre>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/GNrUM/734/" rel="nofollow">clicky clicky</a></p>
  
  <p>the problem can be replicated my pressing the 'START' button again after you press it the first time. You will see a second counter beginning from 0 while at the same time the initial counter will continue to increment and display.</p>
  
  <p><strong>What i need is either:</strong></p>
  
  <p>1-have the start button be able to be pressed again and restart clean from 0 every time</p>
  
  <p>2-have the stop and reset button be able to be pressed to reset the counter back to 0 then press the start button to begin a new clean counter</p>
  
  <p><strong>What i DONT want:</strong></p>
  
  <p>1 - a counter in the function that ends it after certain seconds <code>if(sec == 20){die();};</code>
  each request is a different length of time so this will not work</p>
  
  <p>2 - to run another function and have the timers silently run in the background until the page is reloaded</p>
  
  <p>I played around with <code>clearInterval()</code> and couldn't get anything to work...</p>
  
  <p>Thank you for your time and advice!</p>