Animation don't stop on variable value

Question

Why is the percentage not stopping after the first animation. That being, right after the filling bar.

$('.perctext').delay(1500).each(
     function(a)
       $(this).delay(a*250).animate({
     'left':width
  },1000);
});

FIDDLE

What am I missing?

Thank you in advance.

SOLUTION: Check the answer from Blender bellow. FIDDLE WITH SOLUTION

Answer 1

You're querying the DOM each time for elements that match your selector, so the first bar matches one element with a class of perctext, the second bar matches the previous bar's percentage text element and its own, and the third bar matches all three.

Store the created element in a variable and animate only that specific one

var $perctext = $('<div>', {'class': 'perctext', text: width});
$perctext.appendTo(this);

$perctext.delay(1500).each(function(a) {
    $(this).delay(a * 250).animate({
        'left': width
    }, 1000);
});