title: javascript Multiple or Reset countdown function
body: <p>I want to reset countdown timer in javascript every time I click start. if the countdown is done counting then it is ok, but if the countdown still counting and then I click start again, it will show 2 countdown in the same place(not reset) </p>
  
  <p><a href="https://jsfiddle.net/riyadiari/216uzpm8/41/" rel="nofollow noreferrer">enter link description here</a>
  here is the 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>function countdown( elementName, minute, second )
  {
     var element, endTime, hours, mins, msLeft, time ;
  
      function twoDigits( n )
      {
          return (n &lt;= 9 ? "0" + n : n);
      }
  
      function updateTimer()
      {
          msLeft = endTime - (+new Date);
          if ( msLeft &lt; 1000 ) {
              element.innerHTML = "Alarm";
          } else {
              time = new Date( msLeft );
              hours = time.getUTCHours();
              mins = time.getUTCMinutes();
              element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
              setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
          }
      }
  
      element = document.getElementById( elementName );
      endTime = (+new Date) + 1000 * (60*minute + second) + 500;
      updateTimer();
   //if ( abort == 999 ){msLeft = 0 ;}
  }
  
  function resetz(a) {
   if(a==11){countdown( "demo", 0, 10 )}
   if(a==21){countdown( "demo2", 5, 0 )}
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      /* text-align: center; */
      border: 5px solid #004853;
      display:inline;
      padding: 5px;
      color: #004853;
      font-family: Verdana, sans-serif, Arial;
      font-size: 40px;
      font-weight: bold;
      text-decoration: none;
  }
  
  body {
    padding: 20px;
    text-align: center;
  }
  .btn {
    font-size: 19px;
    position: relative;
    width: 100%;
    background: #004853;
    color: #fff;
    border-radius: .55em;
    transition: all 0.35s ease;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5px;
    text-align: center;
    cursor : pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="demo" &gt;00:00&lt;/div&gt;
  &lt;a class="btn" onclick="resetz(11)"&gt;START&lt;/a&gt; 
  &lt;div id="demo2" &gt;00:00&lt;/div&gt;
  &lt;a class="btn" onclick="resetz(21)"&gt;START&lt;/a&gt; </code></pre>
  </div>
  </div>
  </p>