title: JQUERY: getting the different values from divs with the same class
body: <p>I have cobbled together some code to build an animated percentage bar. Everything works sweet when only one bar is present on a page. I have the following code</p>
  
  <pre><code>&lt;div id="progress_bar" class="ui-progress-bar ui-container"&gt; 
  &lt;div class="ui-progress" style="width: 60%;"&gt; 
  &lt;span class="ui-label" style="display:none;"&gt;&lt;b class="value"&gt;&lt;span class="client_overall_progress"&gt;60&lt;/span&gt;%&lt;/b&gt;&lt;/span&gt; 
  &lt;/div&gt; 
  &lt;/div&gt;
  
  
  $(function() {
  var overall_progress = $(".client_overall_progress", this) .text();
  
  // Hide the label at start
  $('#progress_bar .ui-progress .ui-label').hide();
  // Set initial value
  $('#progress_bar .ui-progress').css('width', '7%');
  
  // Simulate some progress
  $('#progress_bar .ui-progress').animateProgress(overall_progress);
  });
  </code></pre>
  
  <p>I would like to be able to place multiple percent bars on my page but i am not sure how to separate all the different values and have each bar render to the correct percent. </p>
  
  <p>Can anyone help me out?</p>