title: clearInterval on one node while timer continues on another
body: <p>I'm working on a slideshow driven by switching classes only. All transitions are in the CSS. Multiple instances may be on the page. How can I stop the one that is clicked while the others continue?</p>
  
  <p>clearInterval() seems to stop all instances.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideshows = document.querySelectorAll('.slideshow');
  function startSlideshow() {
      return window.setInterval(function(){
          for (var i=0;i&lt;slideshows.length;i++){
              var $this = slideshows[i];
              var slides = document.querySelectorAll('.current');
              for (var i=0;i&lt;slides.length;i++){
                  var e = slides[i];
                  if (e == slideshows[i].lastElementChild){
                      slideshows[i].firstElementChild.classList.add('current');
                  } else {
                      e.nextElementSibling.classList.add('current')
                  };
                  e.classList.remove('current');
              }
          }
      }, 1000);
  }
  var id = startSlideshow();
  
  for (var i=0;i&lt;slideshows.length;i++){
      slideshows[i].addEventListener('click', function(){
          this.classList.toggle('pause');
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slideshow {height:200px; margin-bottom:1px; width:300px;}
  .slide {
      background-color:#555;
      height:200px;
      transition:opacity 0.5s ease-in-out;
      opacity:0;
      position:absolute;
      width:300px;
  }
  .slide:nth-child(even) {background-color:#d14124;}
  .slide.current {opacity:1;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slideshow"&gt;
      &lt;article class="slide current"&gt;One&lt;/article&gt;
      &lt;article class="slide"&gt;Two&lt;/article&gt;
      &lt;article class="slide"&gt;Three&lt;/article&gt;
      &lt;article class="slide"&gt;Four&lt;/article&gt;
      &lt;article class="slide"&gt;Five&lt;/article&gt;
  &lt;/div&gt;
   
  &lt;div class="slideshow"&gt;
      &lt;article class="slide current"&gt;1&lt;/article&gt;
      &lt;article class="slide"&gt;2&lt;/article&gt;
      &lt;article class="slide"&gt;3&lt;/article&gt;
      &lt;article class="slide"&gt;4&lt;/article&gt;
      &lt;article class="slide"&gt;5&lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>