Raty multiple ratings

Question

I am using Raty star plugin in read only mode, the rating numbers are coming from database and I have 7 scores and I want star rating for each of 'em. Even though I put the div in a while loop, I am only getting one star rating. can someone help me out please?

$(function() {
    $('#rate').raty({
    path     : '../img',
    readOnly   : true,
     size     : 24,
    starHalf : 'star-half-big.png',
    starOff  : 'star-off-big.png',
    starOn   : 'star-on-big.png',
     score: function() {
    return $(this).attr('data-score');
    }
  });
  });

while($row = $result->fetch_assoc()){ ?>
<div id="rate" data-score="<?php echo $row['rating'];"></div><!--even though I have 7 ratings in the table only one is showing up here -->
 <?php } ?>

Answer 1

try using class instead of Id because Id should be unique

JAVASCRIPT CODE

    $(function() {
        $('.rate').raty({
            path     : '../img',
            readOnly   : true,
             size     : 24,
            starHalf : 'star-half-big.png',
            starOff  : 'star-off-big.png',
            starOn   : 'star-on-big.png',
             score: function() {
            return $(this).attr('data-score');
            }
        });
  });

PHP CODE

 while($row = $result->fetch_assoc()){ ?>
    <div class="rate" data-score="<?php echo $row['rating'];"></div><!--even though I have 7 ratings in the table only one is showing up here -->
 <?php } ?>