function is setting all instead of each

I have a simple function that sets the width of a bar based on an argument.

And I call the function on .each with jQuery.

The console logs the statement correctly, showing me it seems to work. However, the style seems to be overridden by the last value found.

Here is the function:

function barGraph(innerWidth, barWidth) {

    innerWidth = parseInt(innerWidth) * .01 || .50;

    barWidth = parseInt(barWidth) || 267;



   // find percentage of total width

   var innerWidth = Math.floor(innerWidth * barWidth);



   var $innerBar = $('.slider-box div');



   $innerBar.css('width', innerWidth + 'px');



   console.log("Width should be: " + innerWidth + 'px');

}

then i call the function on each with jQuery:

$(document).ready(function() {

   var $innerBar = $('.slider-box div');



   $innerBar.each(function(index) {

       var newWidth = $(this).attr("data-bar-width");

       barGraph(newWidth, 267);

   });

});

the console log shows 10 times, with all appropriate widths. However, the style for all is the same as the last width.

Can someone help explain how I get the function to set the width of the currently selected div?

Thanks so much in advance,

Adam.