title: Start next animation in jquery using a button
body: <p>I'm making a list (like a playlist) composed by some divs. Every div, with ID like <code>segmentN</code> has to animate the <code>width</code> property.</p>
  
  <p>The divs are places in order (segment1, segment2, segment3...). Only 1 div must be animated at a time, and the next div has to animate, when the button is pressed, furthermore if an animation is playing, then is has to stop.</p>
  
  <p>All the divs are a result of a loop, so I need to use the same jQuery-function to all the divs. How can I do that and run next animation when the button is pressed?</p>
  
  <p>Here is the JSFiddle code: <a href="https://jsfiddle.net/bz9vn7c4/1/" rel="nofollow noreferrer">https://jsfiddle.net/bz9vn7c4/1/</a></p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id="package_list"&gt;
    &lt;div id="package1" class="package"&gt;
      &lt;div id="segment1" class="type1 segment" value="200px"&gt;PKG1 TYPE1&lt;/div&gt;
      &lt;div id="segment2" class="type2 segment" value="300"&gt;PKG1 TYPE2&lt;/div&gt;
      &lt;div id="segment3" class="type1 segment" value="100"&gt;PKG1 TYPE1&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="package2" class="package"&gt;
      &lt;div id="segment4" class="type1 segment" value="400"&gt;PKG2 TYPE1&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="package3" class="package"&gt;
      &lt;div id="segment5" class="type1 segment" value="100"&gt;PKG3 TYPE1&lt;/div&gt;
      &lt;div id="segment6" class="type3 segment" value="200"&gt;PKG3 TYPE3&lt;/div&gt;           
    &lt;/div&gt;
  
    &lt;div id="package4" class="package"&gt;
      &lt;div id="segment7" class="type1 segment" value="150"&gt;PKG4 TYPE1&lt;/div&gt;
      &lt;div id="segment8" class="type2 segment" value="250"&gt;PKG4 TYPE2&lt;/div&gt;
      &lt;div id="segment9" class="type1 segment" value="100"&gt;PKG4 TYPE1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="next_btn"&gt;[ BUTTON ]&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.package_list {
  
  }
  .package {
      width: 100%;
  }
  .segment {
      display: inline-block;
  }
  .type1 {
      background-color: aqua;
      width: 100px;
      height: 100px;
  }
  .type2 {
      background-color: chartreuse;
      width: 100px;
      height: 100px;
  }
  .type3 {
      background-color: darkgoldenrod;
      width: 100px;
      height: 100px;
  }
  </code></pre>
  
  <p><strong>jQuery</strong>:</p>
  
  <pre><code>$(document).ready(function() {
    $("#next_btn").click(function(){
      $("#segment1").animate({width: "300px"}, 30000, "linear" );
    });
  });
  </code></pre>