function is setting all instead of each
<p>I have a simple function that sets the width of a bar based on an argument.</p>

<p>And I call the function on .each with jQuery.</p>

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

<p>Here is the function:</p>

<pre><code>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');
}
</code></pre>

<p>then i call the function on each with jQuery:</p>

<pre><code>$(document).ready(function() {
   var $innerBar = $('.slider-box div');

   $innerBar.each(function(index) {
       var newWidth = $(this).attr("data-bar-width");
       barGraph(newWidth, 267);
   });
});
</code></pre>

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

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

<p>Thanks so much in advance,</p>

<p>Adam.</p>
