title: Adding and removing a active class to a progress bar based on a click event based on a object's properties
body: <p>I have been working on this problem for a while now. I need some major guidance. I have a progress bar that is a made up of unordered list <code>&lt;ul&gt;&lt;/ul&gt;</code> with list items inside that make up dividers and circles which are appended to each other like below. They are built based on <code>StepSize</code> properties in a object, I loop through the object and assign classes to these list items.</p>
  
  <pre><code>&lt;li class="circle"&gt;&lt;/li&gt;
  &lt;li class="divider halfA"&gt;&lt;/li&gt;
  &lt;li class="divider halfB"&gt;&lt;/li&gt;
  &lt;li class="circle"&gt;&lt;/li&gt;
  &lt;li class="divider full"&gt;&lt;/li&gt;...
  </code></pre>
  
  <p>I have a next and a back button that changes the index, mimicking changing a page in a single page app I have running in another application. The active classes are added only to the index you are on and it checks if you on a specific StepSize for different situations that may arise. For example if you are on the first index and the <code>StepSize</code> property is a halfA then you activate circle 1 and divider 1. If its a full <code>StepSize</code> instead you active only circle 1. But that is only in the first index situation, after that the logic changes. Hopefully my code will reveal this more accurately than I can in words.</p>
  
  <p>My issues currently are the first and second click or what should be <code>index=2</code> and <code>index=3</code> do not advance the progress bar or activate the correct list items. Technically after that everything works for the divider active state. I haven't got to fully building the circle active state because I wanted to get the dividers working properly first. There are three StepSize types, full, halfA &amp; halfB (which is two list items but have half the width of a full list item <code>StepSize</code>)</p>
  
  <p>I will place my code below, but <a href="https://jsbin.com/getipa/edit?js,console,output" rel="nofollow noreferrer">here</a> is a <strong>JSbin</strong> to play with, and I will also attach a diagram of intended interaction. Also please feel free to adjust the StepSize property to test different orders, but remember a halfA StepSize must always be followed by a halfB.</p>
  
  <p>Hopefully This all makes sense. If clarification is needed I am more than happy to provide them. Really hope this can be solved, I am going a little nutty!</p>
  
  <p><img src="https://i.stack.imgur.com/Et4DK.png" alt="progress bar diagram"></p>
  
  <p><a href="https://jsbin.com/getipa/edit?html,console,output" rel="nofollow noreferrer">https://jsbin.com/getipa/edit?html,console,output</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Example Object Combination #1 full start -&gt; half end
  variation = {
      ActiveSection:'',
      Sections:
          [
            {ID: '1', StepSize:"halfA"}, // Change StepSize's for testing
            {ID: '2', StepSize:'halfB'},
            {ID: '3', StepSize:"full"},
            {ID: '4', StepSize:"halfA"},
            {ID: '5', StepSize:'halfB'},
            {ID: '6', StepSize:"full"},
            {ID: '7', StepSize:"halfA"},
            {ID: '8', StepSize:'halfB'},
            {ID: '9', StepSize:"halfA"},   
            {ID: '10', StepSize:'halfB'},
            {ID: '11', StepSize:"full"}
          ]
  };
  
  variation.ActiveSection = variation.Sections[0];
  
  var sectionCount = variation.Sections.length;
  
  // create Progress Bar
  var progressBar = $('.progress-bar');
  progressBar.append('&lt;ul class="unstyled"&gt;&lt;/ul&gt;');
  
  var content = '';
  
  for(var i=0; i&lt;sectionCount; i++){
  
      var stepSize = variation.Sections[i].StepSize;
      var stepClass = stepSize == 'full' ? 'full' : stepSize + ' half';
  
  
      if(stepSize == 'full' || stepSize == 'halfA'){
          content += '&lt;li&gt;&lt;span class="circle"&gt;&lt;/span&gt;&lt;/li&gt;';
      }
  
      content += '&lt;li&gt;&lt;span class="divider ' + stepClass +'"&gt;&lt;/span&gt;&lt;/li&gt;';
  
      if(i == sectionCount-1){
          content += '&lt;li&gt;&lt;span class="circle"&gt;&lt;/span&gt;&lt;/li&gt;';
      }
  }
  
  progressBar.find('ul').append(content);
  
  
  // bind ProgressBar action
  
  var count = 1;
  
  updateProgressBar(1);
  
  $('.next').click(function(){
      var currentIndex = variation.ActiveSection ?     variation.Sections.indexOf(variation.ActiveSection) : 0;
      var nextIndex = currentIndex == variation.Sections.length-1 ? currentIndex : currentIndex+1;
      variation.ActiveSection = variation.Sections[nextIndex];
      updateProgressBar(count);
      count++;
  });
  
  $('.previous').click(function(){
    $('.divider').removeClass('active');
    count = count-2;
    updateProgressBar(count);
    count++;
  });
  
  
  function activateLine(n){
      var dividerList = $('.divider');
      for(var i=0; i&lt;n; i++){
          $(dividerList[i]).addClass('active');
      }
  }
  
  function activateCircle(n){
      var circleList = $('.circle');
      for(var i=0; i&lt;n; i++){
          $(circleList[i]).addClass('active');
      }
  }
  
  
  function updateProgressBar(index){ 
    
     console.log(variation.ActiveSection.StepSize + "StepSize");
     console.log(index + "index");
    
    for(x=0;x&lt;=variation.Sections.length;x++){
      if(x === 0){
          if(variation.ActiveSection.StepSize == 'halfA'){
              activateLine(1);
          }
      }
      else if(index -1 == x){
        var n = x;
        x++;
        activateLine(n);
      }
    }
    
    
    
    
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
    list-style-type:none;
  }
  
  .circle{
    width:25px;
    height:25px;
    background:#808080;
    display:block;
    border-radius:50%;
    float:left;
    
  }
  
  .circle.active{
    background:#000000;
  }
  
  .divider{
    margin-top:10px;
  }
  
  
  
  .divider.half{
    width:50px;
    height:5px;
    background:#808080;
    display:block;
    float:left;
  }
  
  .divider.half.active{
    background:#000;
  }
  
  .divider.full{
    width:100px;
    height:5px;
    background:#808080;
    display:block;
    float:left;
    
  }
  
  .divider.full.active{
    background:#000;
  }
  
  .menu{
    width:100%;
    display:block;
    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.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="progress-bar"&gt;&lt;/div&gt;
  &lt;a href="#" class="previous"&gt;previous&lt;/a&gt;
  &lt;a href="#" class="next"&gt;next&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>