Why doesn't jquery animation work in a loop?

Question

JavaScript

Hello! I can’t figure out what the reason is, I have no experience, I’ve been fussing all day already. There is the following structure of the survey (the number of options may be different):

<div class="vote-res">
  <div class="poll-row">
    <strong>Ламинат4</strong>
    <span class="pull-right">43%</span>
    <div class="progress">
      <div id="bar4" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%"></div>
    </div>
  </div>
  <div class="poll-row">
    <strong>Ламинат2</strong>
    <span class="pull-right">21%</span>
    <div class="progress">
      <div id="bar2" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
    </div>
  </div>
  <div class="poll-row">
    <strong>Ламинат3</strong>
    <span class="pull-right">21%</span>
    <div class="progress">
      <div id="bar3" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
    </div>
  </div>
  <div class="poll-row">
  <strong>Ламинат</strong>
  <span class="pull-right">14%</span>
  <div class="progress">
    <div id="bar1" class="progress-bar" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%"></div>
  </div>
  </div>

  <p>Всего голосов: 14</p>
</div>

The jquery function should animate the bar (percentage of voters) when the page loads. The percentage is taken from the same code into the percentage variable and then the block should be given such a width. However, my animation only works for the first element.

function animateResults(){
  $(".poll-row").each(function(){
      var percentage = $(this).children("span").text();
      console.log(percentage);
      $(this).children(".progress").children("div").css({width: "0%"}).animate({width: percentage}, 'slow');
  });
}

Please help me find what could be the problem?

Answer 1

In the loadResults(data) function, do not style the width for the progress-bar blocks.

if (data[id][OPT_ID] !== votedID) {
      results_html = results_html + "<strong>"+data[id][OPT_TITLE]+"</strong><span class='pull-right'>"+percent+"%</span><div class='progress'><div id='bar"+data[id][OPT_ID]+"' class='progress-bar' role='progressbar' aria-valuenow='"+percent+"' aria-valuemin='0' aria-valuemax='100'></div></div>";
    } else {
results_html = results_html + "<strong>"+data[id][OPT_TITLE]+"</strong><span class='pull-right'>"+percent+"%</span><div class='progress'><div id='bar"+data[id][OPT_ID]+"' class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='"+percent+"' aria-valuemin='0' aria-valuemax='100'></div></div>";
    }

Posted a working piece.

Answer 2

I copied your code and ran it, everything works, give the full code listing.