title: Multiple bootstrap carousels on one page, can only control one
body: <p>I have a dynamic amount of carousels loaded at once in a view, but I can only scroll through the first carousel rendered.  How can I control all of the ones loaded? Only one carousel is able to be viewed at once, the others are hidden. </p>
  
  <pre><code>$('#myCarousel').carousel({
    interval: 10000
  })
  
  $('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="draft posts" id="draft_1"&gt;&lt;div class='container'&gt;
    &lt;div class='col-md-12'&gt;
      &lt;div class='carousel slide' id='myCarousel'&gt;
        &lt;div class='carousel-inner'&gt;
          &lt;div class='item active'&gt;
            &lt;div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'&gt;
              &lt;div id='border'&gt;
                &lt;a href='#'&gt;&lt;/a&gt;
                &lt;div class='text-center'&gt;
                  Revised
                &lt;/div&gt;
                &lt;div class='view-draft-title'&gt;
  
                          &lt;h2&gt;I'm editing htis draft&lt;/h2&gt;
                        &lt;p contenteditable="true"&gt; &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class='view-draft-body'&gt;
  
                          &lt;h2&gt;I'm editing htis draft&lt;/h2&gt;
                        &lt;p contenteditable="true"&gt; &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='item'&gt;
            &lt;div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'&gt;
              &lt;div id='border'&gt;
                &lt;a href='#'&gt;&lt;/a&gt;
                &lt;div class='text-center'&gt;
                  Original
                &lt;/div&gt;
                &lt;div class='view-draft-title'&gt;
                  &lt;h1&gt;This is Tsteting new draft&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div class='view-draft-body'&gt;
                  &lt;h2&gt;Click to W&lt;span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;"&gt;$('#post-body textarea').val(content)&amp;nbsp;&lt;/span&gt;&lt;span style="line-height: 1.1;"&gt;&amp;nbsp;editing&lt;/span&gt;&lt;/h2&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'&gt;
        &lt;i class='glyphicon glyphicon-chevron-left'&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'&gt;
        &lt;i class='glyphicon glyphicon-chevron-right'&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="draft posts" id="draft_2"&gt;&lt;div class='container'&gt;
    &lt;div class='col-md-12'&gt;
      &lt;div class='carousel slide' id='myCarousel'&gt;
        &lt;div class='carousel-inner'&gt;
          &lt;div class='item active'&gt;
            &lt;div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'&gt;
              &lt;div id='border'&gt;
                &lt;a href='#'&gt;&lt;/a&gt;
                &lt;div class='text-center'&gt;
                  Revised
                &lt;/div&gt;
                &lt;div class='view-draft-title'&gt;
  
                          &lt;h2&gt;Draft 2 After edit&lt;/h2&gt;
                &lt;/div&gt;
                &lt;div class='view-draft-body'&gt;
  
                          &lt;h2&gt;Draft 2 After edit&lt;/h2&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='item'&gt;
            &lt;div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'&gt;
              &lt;div id='border'&gt;
                &lt;a href='#'&gt;&lt;/a&gt;
                &lt;div class='text-center'&gt;
                  Original
                &lt;/div&gt;
                &lt;div class='view-draft-title'&gt;
                  &lt;h1&gt;Number 2&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div class='view-draft-body'&gt;
                  &lt;h2&gt;Draft 2 before edit&lt;/h2&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'&gt;
        &lt;i class='glyphicon glyphicon-chevron-left'&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'&gt;
        &lt;i class='glyphicon glyphicon-chevron-right'&gt;&lt;/i&gt;
  </code></pre>