title: Jquery Addclass/Removeclass in specific order based on id attribute
body: <p>I'm attaching an addClass to a group of elements with the same class. However, I need it to be done in a specific order based on the ID attribute. I've been trying a for loop and the addClass based on the element with the ID at the loop number. However, this ends up applying the addClass at all once and I need it to do it one at a time based on the loop. How can I achieve this? </p>
  
  <p>Originally I thought I could addClass, delay/setTimeOut, then removeClass, but no matter what I try, it seems to just want to apply to all elements at once when my desired affect is to loop through the IDs individually and addClass, delay, removeClass.</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>$("li.all-floors[id='1']").removeClass("on-floor");
   for (var i = 1; i &lt;= floorValueNum; i++) {                                     
  
  setTimeout(function() {
       $("li.all-floors[id=" + (i-1) + "]").addClass("on-floor");
  }, 1000);
  
              }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.on-floor{
      
      color: red;
             
  }
  
  .housing-floor {
      margin: 0;
      padding: .25em 2em;
      border-top: 2px solid #FFFFFF;
      text-align: center;
      line-height: 1em;
      font-size: .75em;
      text-align: center;
      color: black;
      font-weight: bold;
          -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  .activity-floor {
      margin: 0;
      padding: .4em 2em;
      border-top: 2px solid #FFFFFF;
      text-align: center;
      line-height: 1.5em;
      font-size: .75em;
      text-align: center;
      color: black;
      font-weight: bold;
          -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  
  .activity-floor-group, .housing-floor-group{
      list-style: none;
      padding: 0;
      margin: 0;
    float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class= "housing-floor-group"&gt;
                &lt;li class="housing-floor all-floors" id="42"&gt;42&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="40"&gt;40&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="38"&gt;38&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="36"&gt;36&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="34"&gt;34&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="32"&gt;32&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="30"&gt;30&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="28"&gt;28&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="26"&gt;26&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="24"&gt;24&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="22"&gt;22&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="20"&gt;20&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="18"&gt;18&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="16"&gt;16&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="14"&gt;14&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="12"&gt;12&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="10"&gt;10&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="8"&gt;08&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="6"&gt;06&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class= "housing-floor-group"&gt;
                &lt;li class="housing-floor all-floors" id="43"&gt;43&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="41"&gt;41&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="39"&gt;39&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="37"&gt;37&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="35"&gt;35&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="33"&gt;33&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="31"&gt;31&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="29"&gt;29&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="27"&gt;27&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="25"&gt;25&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="23"&gt;23&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="21"&gt;21&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="19"&gt;19&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="17"&gt;17&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="15"&gt;15&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="13"&gt;13&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="11"&gt;11&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="9"&gt;09&lt;/li&gt;
                &lt;li class="housing-floor all-floors" id="7"&gt;07&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="activity-floor-group"&gt;
                  &lt;li class="activity-floor all-floors" id="5"&gt;Pool&lt;/li&gt;
                  &lt;li class="activity-floor all-floors" id="4"&gt;Gym&lt;/li&gt;
                  &lt;li class="activity-floor all-floors" id="3"&gt;Restaurant&lt;/li&gt;
                  &lt;li class="activity-floor all-floors" id="2"&gt;Meeting Rooms&lt;/li&gt;
                  &lt;li class="on-floor activity-floor all-floors" id="1"&gt;Lobby&lt;/li&gt;
        &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>