title: Javascript timer to use multiple times in a page
body: <p>I have this Javascript count down timer that works perfectly. Only problem is i can use it for only one time in one page. I want to use it multiple times.</p>
  
  <p>I think script use <code>id ="timer"</code> that is why i am not able to use it multiple times.</p>
  
  <p>Below  is the JS code:</p>
  
  <pre><code>&lt;script&gt;
  var startTime = 60; //in Minutes
  var doneClass = "done"; //optional styling applied to text when timer is done
  var space = '       ';
  
  function startTimer(duration, display) {
    var timer = duration,
      minutes, seconds;
    var intervalLoop = setInterval(function() {
      minutes = parseInt(timer / 60, 10)
      seconds = parseInt(timer % 60, 10);
      minutes = minutes &lt; 10 ? "0" + minutes : minutes;
      seconds = seconds &lt; 10 ? "0" + seconds : seconds;
      display.textContent = "00" + space + minutes + space + seconds;
      if (--timer &lt; 0) {
        document.querySelector("#timer").classList.add(doneClass);
        clearInterval(intervalLoop);
      }
    }, 1000);
  }
  
  window.onload = function() {
    var now = new Date();
    var hrs = now.getHours();
    var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
      display = document.querySelector("#timer");
  
    startTimer(setMinutes, display);
  };
  &lt;/script&gt;
  </code></pre>