How to animate *independently* several sections of progress bars in Bootstrap?

Question

I have some Bootstrap code which works perfectly well to animate a section of progress bars when it is viewed by the user.

However it animates all the progress bars in the page instead of animating only the progress bars in that viewed section. As a result, when the user goes to another section of progress bars, these are already animated and he does not see any animation.

My question is then: how to modify the code below to animate independently the different sections as they are viewed?

CSS

#skills {
  padding: 60px 0;
}

#skills .progress {
  height: 35px;
  margin-bottom: 10px;
}

#skills .progress .skill {
  font-family: "Open Sans", sans-serif;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}

JS

// Skills section
$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

HTML

<!-- The first section of progress bars somewhere in the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
    </div>
  </div>
</section>

<!-- Another section of progress bars further down the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
    </div>
  </div>
</section>

Answer 1

i just noticed you don't close your section elements and other tags properly

<section class="skills">
    <div class="skills-content">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
        </div>
    </div>
</section>

<!-- Another section of progress bars further down the page -->
<section class="skills">
    <div class="skills-content">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
        </div>
    </div>
</section>

when your waypoint function called you each all your progress elements instead of only child progress elements

$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() { // <- you are getting all progress elements
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

change to

$('.skills').waypoint(function () {
   var el = this.element;
   var children = $(el).find(".progress-bar");
   $(children).each(function () { // <- make sure getting only children elements
        $(this).css("width", $(this).attr("aria-valuenow") + '%');
   });
}, { offset: '80%' });

and make sure other skills section not viewing by user when page loaded(not in the viewport)

Answer 2

It should work if you use different classes in your HTML and then in your JS initiate the different classes one by one when needed

    <div class="progress">
      <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
      </div>
    </div>

$('#skills').waypoint(function() {
  $('.progress-bar.progress-bar-1').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );