通过循环创建的星级评分系统

Question

enter image description here我有一个表格，显示数据库中的食谱列表。每个食谱都会存储5个评级。如果没有提交评级，则会显示“尚未评级”。如果食谱有评级，例如3，我希望出现3颗星。我已经编写了jquery来尝试实现这一点，但它适用于第一个配方而不是其余部分。对于每个食谱，打印更多的星星。我出错的任何想法？

if ($avg !=0)
{
  define('RATE_RECIPE_MAX_STAR_RATING', 5);
  $contentitems1 = "<form><div class='stars'>";
  for ($i = 1; $i <= RATE_RECIPE_MAX_STAR_RATING; $i++) 
  {
    //$contentitems1 .= '<input type="radio" style= "display:none;" 
    //$contentitems1 .= '<img class="rate_recipe_star" name="star_' . $i . '" id="star_' . $i . '" src="fadedstar.png" width="25" />';
    $contentitems1 .= '<span class="fa fa-star-o star"  name="star_' . $i . '" id="star_' . $i . '"></span>';
}

"</div></form>";
echo $contentitems1 .="<script type='text/javascript'> paint_the_stars($avg)
</script>";} 
echo '<div class="star_' . $avg . '"></div>'?>

function paint_the_stars(howmany) {
  var items = new Array();

  $(".star").each(function() {
    //var star = jQuery(this)
    var star = $(this);
    console.log(star);
    var starno = $(star).attr('id').substring(5);
    console.log(starno);
    //console.log("Star:"+star);

    if (starno <= howmany) {
      //console.log("TRUE PRINT A STAR"+starno);
      //$(this).attr('src', 'yellowstar.png');
      var item = $(this).removeClass("fa-star-o").addClass("fa-star");
      items.push(item);
    } else {
      //return true;
      var item = $(this).removeClass("fa-star").addClass("fa-star-o");
      items.push(item);
    }

    if (starno == 5) {
      $.each(items, function(){
        console.log(this);
        $('.star_'+howmany).append(this);
      });
      return false;
    }   
  })
}