title: Multiple (14) countdowns on HTML page don't work
body: <p>I want to display 14 countdowns (preferably as plain <code>p</code> elements in my HTML document) on a single HTML page. I don't know anything about JavaScript so I took a countdown script from w3schools. Works fine, somehow I even manages to display the timer double digit by searching the web how to.</p>
  
  <p>Here's the code (UPDATE!):</p>
  
  <pre><code>// defining countDownDates as an empty array : 
      var countDownDates = [];
  
      // adding any count down date to your array : 
      countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime());
      countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime());
      countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
      countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
      countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
      countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
      countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime());
      countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime());
      countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
      countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
      countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
      countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
      countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime());
      countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime());
  
      // calling an init function that will build the HTML needed for every count down
      init(countDownDates);
  
      // looping through your array of countDownDates
      for (var i=0;i&lt;countDownDates.length;i++) {
          // calling the countdown function, pass it the array and the current version of i as parameters 
          countDown(countDownDates, i);
      }
  
      /* adds, to the document, a p element for each entry in the countDownDates array */
      function init(countDownDates) {     
          var timersDiv = document.getElementById("timers");
          var dateElement;
          for (var i=0;i&lt;countDownDates.length;i++) {         
              dateElement = document.createElement("p");
              dateElement.id = "date" + i;
              timersDiv.appendChild(dateElement);
          }   
      }       
  
      /* countDown function, your countDown handling code within a reusable function */
      function countDown(countDownDates, index) {
          var x = setInterval(function() {
              var now, distance, days, hours, minutes, seconds, x;
  
              now = new Date().getTime();
              distance = countDownDates[index] - now;
  
              // Time calculations for days, hours, minutes and seconds
              days = Math.floor(distance / (1000 * 60 * 60 * 24));
              hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
              (1000 * 60 * 60));
              minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
              seconds = Math.floor((distance % (1000 * 60)) / 1000);                            
  
              // Display days, hours, minutes and seconds in 2 digits if &lt; 10
              if((days+"").length === 1){
                  days = "0"+days;
              }
              if((hours+"").length === 1){
                  hours = "0"+hours;
              }
              if((minutes+"").length === 1){
                  minutes = "0"+minutes;
              }
              if((seconds+"").length === 1){
                  seconds = "0"+seconds;
              }
  
              // Display the result in the element with id date0, date1, etc.
              document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
  
              // If the count down is finished, write some text and add css class to change ended timers color 
              if (distance &lt; 0) {
                  clearInterval(x);
                  document.getElementById("date" + index).className = "timerend";
                  document.getElementById("date" + index).innerHTML = "00:00:00:00";
              }
  
          }, 1000);
      }
  </code></pre>
  
  <p>I tried to multiply the script completely 14 times with altered first line of code to a specific future date - so the same countdown shows up 14 times.</p>
  
  <p>Is there a way to multiply the first line somehow 14 times to have 14 different specific dates to count from in 14 different <code>p</code> elements by 14 IDs?
  e.g.</p>
  
  <pre><code>&lt;p class="date1" &gt;show timer1&lt;/p&gt;
  &lt;p class="date2" &gt;show timer2&lt;/p&gt;
  &lt;p class="..." &gt;...&lt;/p&gt;
  &lt;p class="date14" &gt;show timer14&lt;/p&gt;
  </code></pre>
  
  <p>Edit:
  In addition I would like to know how I can have two additional <code>p</code>element outputs like</p>
  
  <pre><code>&lt;p class="online_date0" &gt;show text "This countdown is running right now"&lt;/p&gt;
  &lt;p class="offline_date0 &gt;show text "This countdown is not running at the moment&lt;/p&gt;
  </code></pre>
  
  <p>... to have something like an indicator like "on air". Thanks!</p>
  
  <p><strong>Edit Nov 1, 2017</strong></p>
  
  <p>I don't get why this don't work in the specific if funktion:</p>
  
  <pre><code>if (distance &lt; 0) {
  clearInterval(x);
      document.getElementById("date" + index).className = "timerend";
      document.getElementById("outofdate" + index).className = "timerend";
      document.getElementById("date" + index).innerHTML = "00:00:00:00";
  </code></pre>
  
  <p>In the HTML document the date + index <code>p</code>s have a class which is removed when timerend is added. If I add a <code>+</code>before <code>=</code>in the first line after <code>clearInterval(x)</code> the old class stays, but the new class is added every second. I just want to add it one time of course. And if I don't put <code>+</code>before <code>=</code>in that line, the old class is removed of course.
  Since I'm beginning to learn Js I want to understand what is happening here. What did I miss?
  I just want to add a class to every <code>p</code> with indexed ids so it changes color when timer ends. It works, but it removes all other formats I put by the class those indexed <code>p</code>s have.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;p id="date0" class="dates"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>In CSS I put padding and so on in <code>.dates</code>. I've read about adding classes and keep originals, but can't understand a solution obviously.</p>