title: How to chain jQuery addClass() and removeClass() on an array of elements
body: <p>What I'm trying to achieve is to queue up some animations (using CSS3 transition and addClass(), removeClass()) on an array of elements. I've tried multiple queueing mechanisms, but unfortunately they do not behave as expected.</p>
  
  <p>The correct result is to add the 'btn-danger' class to a button, then when the transition end, remove the class. After that go to the next element and so on. This is a dynamic list so I can't hardcode the animations.</p>
  
  <p>Here's some samples of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function animateSelections(cb) {
      var randomIndexesArray = [];
  
      var studentsArray = $('#students-list .btn');
      var studentsArrayLength = studentsArray.length;
  
      function shuffleArray(array) {
          for (var i = array.length - 1; i &gt; 0; i--) {
              var j = Math.floor(Math.random() * (i + 1));
              var temp = array[i];
              array[i] = array[j];
              array[j] = temp;
          }
          return array;
      }
  
      shuffleArray(studentsArray);
  
      var chain = function(element, index) {
          if (element[index]) {
              $(element[index]).addClass('btn-danger').on('webkitTransitionEnd', function () {
                  $(this).removeClass('btn-danger').on('webkitTransitionEnd', function () {
                      chain(element, index + 1);
                  });
              });
          }
      };
  
      chain(studentsArray, 0);
  
      if (typeof cb != 'undefined') {
          cb();
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#students-list button {
      font-size: 14px;
      transition: all .3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="students-list"&gt;
      &lt;div class="row"&gt;            &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John 
      Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
  &lt;/div&gt;&lt;div class="row"&gt;            &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
  &lt;/div&gt;&lt;div class="row"&gt;            &lt;div class="col-xs-3"&gt;
                  &lt;button class="btn btn-block btn-lg btn-primary viable"&gt; John Smith &lt;/button&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The current state of the code never finishes, I think there's a problem with the <code>transitionend</code> event</p>