How to properly apply values farmed from .each()

Morningseven

Markup:
<ul>
  <li>
    <ul id="ratx">
      <li>Location</li>
      <li class="bar"><span></span></li>
      <li class="value">4</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
     <li>Hotel Services</li>
     <li class="bar"><span></span></li>
     <li class="value">5</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Hotel Facilities</li>
      <li class="bar"><span></span></li>
      <li class="value">3</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Room Cleanliness</li>
      <li class="bar"><span></span></li>
      <li class="value">4</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Value for Money</li>
      <li class="bar"><span></span></li>
      <li class="value">1</li>
    </ul>
  </li>
</ul>

I want to represent User Ratings dynamically using JQuery so I made a function like this,

jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;

/* compute ratings */ 
$("li.bar span").css("width", barval);

});

Now, when I alert barval I get all 5 values but when I try to apply the “compute ratings” line, all it does is apply the last value that it finds. How should I go about this?

Sorry if the question is a confusing. I am not quite sure how to phrase everything.