Stop Countdown Timer Javascript onClick
<p>Given the Following code:</p>

<pre><code>    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#counter').animate({width: 'toggle'});
        var count=65;
        var counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count &lt;= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " segs.";}
    });

    $('#myButton03').click(function(){
        recognition.stop();
        $('#myButton02').show();
        $('#counter').toggle();
    });
</code></pre>

<p>I can have the following workflow:</p>

<ul>
<li>User clicks a button, that button gets replaced by another one.</li>
<li>A div appears with a countdown timer of 65 seconds.</li>
</ul>

<p>If the user clicks the other button (the one wich replaced the first one) the first button appears again hiding the second one and then the appeared div (#counter) dissapears. <strong>The problem is</strong>, when the user clicks the first button again, the countdown timer goes nuts and starts toggling random numbers instead of starting a new countdown (only if the user clicks it again before the first countdown stops).</p>

<p>How can I make the timer stops the countdown when <strong>"#myButton03"</strong> gets clicked so it "reboots itself" every time you click <strong>"#myButton02"</strong> without going nuts?</p>
