Update percentage on current resizable bar
<p>I'm slowly getting this figured out. I have multiple resizable bars that have a pointer that displays the percentage inside of it. Right now this updates all the bars pointers but only resizes the current one being dragged. I want to have the number display initially and then if you pick one of the pointers and drag it, that the only one that will update its percentage is that one.</p>

<p>Here is my HTML:</p>

<pre><code>&lt;div id="wrapper" class="clearfix"&gt;
    &lt;div class="r_bar"&gt;&lt;span class="resizable" style="width: 34%;"&gt;&lt;div class="marker"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
    &lt;div class="r_bar"&gt;&lt;span class="resizable secondColor" style="width: 50%;" title="50"&gt;&lt;div class="marker"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my jQuery so far:</p>

<pre><code>$(function(){
var initialWidth = $(this).find('span').css('width').replace('%', '');
initialWidth = parseInt(initialWidth);
var dragging = false;

$('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass('moving');
    var parentOffset = $(this).parent().offset();

    $this = $(e.currentTarget);
    e.preventDefault();

    $(document).mousemove(function(e){
        if (dragging == true){
            $this.css("width",e.pageX - parentOffset.left);
            var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
            $('.moving p').html(percentageChange.toFixed(0));
        }       
    });
});

$(document).mouseup(function(e){
    if (dragging){
        dragging = false;
        $(this).removeClass("moving");
    }
});
});
</code></pre>

<p>I can't get the initial width of the bar to be displayed based on the inline style width and can't isolate the current bar being resized and update the percentage accordingly. All bars numbers update if any have been dragged. The bar won't move on the one that isn't being dragged...but the number will still update.</p>

<p>Having the same problem. 
If one bar is moved the numbers update just fine. But when you go and drag another bar both sets of numbers update with the same number at the same time.</p>
