Reusing script in multiple elements

Question

I have piece of code showing radial bar as in this minimal working example:

http://codepen.io/shankarcabus/pen/GzAfb

I would like to insert several divs with this code, but the JS script remembers only the first value and places them everywhere where "percent" is used. Is there any nice, clean way to fix bar value in multiple cases?

JS code:

$(function(){
    var $ppc = $('.progress-pie-chart'),
    percent = parseInt($ppc.data('percent')),
    deg = 360*percent/100;
    if (percent > 50) {
        $ppc.addClass('gt-50');
    }
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ppc-percents span').html(percent+'%');
});

Answer 1

You should do it for each .progress-pie-chart element. . http://codepen.io/anon/pen/WvWaYB

$(function(){
  var $ppc = $('.progress-pie-chart');
  for(var i = $ppc.length; i --; ) {
      var el = $ppc[i],    
      percent = parseInt($(el).data('percent')),
      deg = 360*percent/100;
      if (percent > 50) {
        $(el).addClass('gt-50');
      }
      $(el).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
      $(el).find('.ppc-percents span').html(percent+'%');
    }     
});

Answer 2

Try

$(function(){
    var $ppc = $('.progress-pie-chart');
    var percent;
    $ppc.each(function(){
        percent = parseInt($(this).data('percent'));
        deg = 360*percent/100;
        if (percent > 50) {
            $(this).addClass('gt-50');
        }
        $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
        $(this).find('.ppc-percents span').html(percent+'%');
    });



});

The .each() will do the changes for each .progress-pie-chart individually, and base it on the percent it calculates for that particular chart, rather than just using the first one's percent for all of them

Answer 3

Then you have to loop through each .progress-pie-chart element use each(). Try this:

  var percent;
  $('.progress-pie-chart').each(function(){
        percent = parseInt($(this).data('percent'));
        deg = 360*percent/100;
        if (percent > 50) {
            $(this).addClass('gt-50');
        }
        $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
        $(this).find('.ppc-percents span').html(percent+'%');
    });

DEMO with multiple charts.