Rating star javascript

Question

I am using this plugin for ratings (http://wbotelhos.com/raty/). Basically, I am displaying multiple items, each item has its own rating stars. The problem is, it is only displaying the first result which is '2.3' and then apply it to all remaining items. How can I fix this?

<ul>
  <li>
    <div class="num_ratings">2.3</div>
    <p class="rating-stars"></p>
  </li>
  <li>
    <div class="num_ratings">4.1</div>
    <p class="rating-stars"></p>
  </li>
  <li>
    <div class="num_ratings">3.0</div>
    <p class="rating-stars"></p>
  </li>
  <li>
    <div class="num_ratings">3.3</div>
    <p class="rating-stars"></p>
  </li>
</ul>



<script>
            $.fn.raty.defaults.path = 'img';
                rating = parseInt($('.num_ratings').html());
              $('.rating-stars').raty(
                {
                    width: 112,
                    readOnly  : true,
                    score: rating,  
              });
        </script>

Answer 1

Try it like this:

$.fn.raty.defaults.path = 'img';

$("li").each(function(){
   rating = $('.num_ratings' , this).text();
   $('.rating-stars' , this).raty(
   {
       width: 112,
       readOnly  : true,
       score: rating,  
   });
});

In this way it will run on every li , get its num_ratings data and create rating in its specific rating-stars p.