title: Using jQuery for slider, first works but second doesn't. Dynamic Elements Needed
body: <p>I have a jQuery slider that I am trying to repeat on the page nearly 20 times. If I have just one of the sliders, it works great! However, I need help figuring out what is wrong with it that makes it break if there are more more the initial set of sliders. If I can create solve this problem dynamically that would be optimal, so that an indefinite number of sliders can be added to the page. Code below: </p>
  
  <p><strong>jQuery:</strong> </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    // Call plugin if you put in head if not not require DOMContentLoaded
    document.addEventListener('DOMContentLoaded',function(){
      new boxSlider(document.querySelector('#slide-one'),{
          delay: '1000', // ms
          effect: 'ease-in-out'
      });
  
      new boxSlider(document.querySelector('#slide-two'),{
          delay: '2000', // ms
          effect: 'ease'
      });
  
      new boxSlider(document.querySelector('#slide-three'),{
          delay: '500', // ms
          effect: 'linear'
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code> &lt;div id="row1mini"&gt;
      &lt;section id="slide-one" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
          &lt;figure&gt;
            &lt;img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/&gt;
            &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure&gt;
            &lt;img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/&gt;
            &lt;figcaption&gt;The city&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure&gt;
            &lt;img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/&gt;
            &lt;figcaption&gt;The map&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;/article&gt;
          &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
          &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="slide-two" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
        &lt;figure&gt;
          &lt;img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&amp;hei=1000&amp;ftr=8&amp;effect=dropshadow,0x000000,10,8,120,8&amp;cvt=jpeg" alt=""/&gt;
          &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/&gt;
          &lt;figcaption&gt;The city&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/&gt;
          &lt;figcaption&gt;The map&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;/article&gt;
        &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
        &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="slide-three" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
        &lt;figure&gt;
          &lt;img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/&gt;
          &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/&gt;
          &lt;figcaption&gt;The city&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/&gt;
          &lt;figcaption&gt;The map&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;/article&gt;
        &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
        &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>HERE I DUPLICATE THE ABOVE HTML, CAUSING THE SLIDER TO BREAK</strong></p>
  
  <pre><code>  &lt;div id="row1mini"&gt;
   &lt;section id="slide-one" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
          &lt;figure&gt;
            &lt;img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/&gt;
            &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure&gt;
            &lt;img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/&gt;
            &lt;figcaption&gt;The city&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure&gt;
            &lt;img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/&gt;
            &lt;figcaption&gt;The map&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;/article&gt;
          &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
          &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="slide-two" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
        &lt;figure&gt;
          &lt;img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&amp;hei=1000&amp;ftr=8&amp;effect=dropshadow,0x000000,10,8,120,8&amp;cvt=jpeg" alt=""/&gt;
          &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/&gt;
          &lt;figcaption&gt;The city&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/&gt;
          &lt;figcaption&gt;The map&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;/article&gt;
        &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
        &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="slide-three" class="slide"&gt;
        &lt;article class="slide-inner"&gt;
        &lt;figure&gt;
          &lt;img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/&gt;
          &lt;figcaption&gt;The Underground&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/&gt;
          &lt;figcaption&gt;The city&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
          &lt;img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/&gt;
          &lt;figcaption&gt;The map&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;/article&gt;
        &lt;a href="#" class="btn right" &gt;&gt;&lt;/a&gt;
        &lt;a href="#" class="btn left" &gt;&lt;&lt;/a&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  </code></pre>