title: jQuery each function not working properly
body: <p>I am generating circular counters for polls where I draw counter for each answer. </p>
  
  <p>I am using this "plugin": <a href="http://blakek.us/labs/jquery/css3-pie-graph-timer/" rel="nofollow">http://blakek.us/labs/jquery/css3-pie-graph-timer/</a></p>
  
  <h2>Problem:</h2>
  
  <p>It is not getting text value from <code>&lt;div&gt;</code> and not drawing Counter for each div. </p>
  
  <p><em>Note: For one div is working good</em></p>
  
  <h2>Example:</h2>
  
  <p><a href="http://jsbin.com/AHUkoBA/3/edit" rel="nofollow">http://jsbin.com/AHUkoBA/3/edit</a></p>
  
  <p><a href="http://jsfiddle.net/mgcq9/" rel="nofollow">http://jsfiddle.net/mgcq9/</a></p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div class="pollAnswerBar"&gt;15&lt;/div&gt;
  &lt;div class="pollAnswerBar"&gt;50&lt;/div&gt;
  &lt;div class="pollAnswerBar"&gt;75&lt;/div&gt;
  </code></pre>
  
  <h2>JS:</h2>
  
  <pre><code>jQuery(document).ready(function() {
  
      function drawCounter(percent) {
          jQuery('div.pollAnswerBar').html('&lt;div class="percent"&gt;&lt;/div&gt;&lt;div id="slice"' + (percent &gt; 50 ? ' class="gt50"' : '') + '&gt;&lt;div class="pie"&gt;&lt;/div&gt;' + (percent &gt; 50 ? '&lt;div class="pie fill"&gt;&lt;/div&gt;' : '') + '&lt;/div&gt;');
          var deg = 360 / 100 * percent;
          jQuery('#slice .pie').css({
              '-moz-transform': 'rotate(' + deg + 'deg)',
              '-webkit-transform': 'rotate(' + deg + 'deg)',
              '-o-transform': 'rotate(' + deg + 'deg)',
              'transform': 'rotate(' + deg + 'deg)'
          });
          jQuery('.percent').html(Math.round(percent) + '%');
      }
  
      jQuery('.pollAnswerBar').each(function() {
          var percent = jQuery(this).text();
          console.log(percent);
          drawCounter(percent);
      });
  
  });
  </code></pre>