Одна из JQuery функций не выполнена

Question

Я внедряю систему звездного рейтинга с JQuery. Я делюсь некоторой частью кода ниже. Вторая функция jquery работает нормально (действие, выполняемое при нажатии), но первая (при наведении курсора) не работает вообще. Как будто кодовый блок не существует. Никаких ошибок или чего-либо в консоли, если я уберу кодовый блок о наведении мыши, ничего не изменится. Похоже, что эта часть не выполняется, как на всех. Я пытался изменить порядок сценариев, но ничего не изменилось. Что я делаю не так?

Это соответствующая часть HTML:

                    <section class='rating-widget'>
                    <div class='rating-stars'>
                      <ul id='stars<?=$row['id'];?>' >
                          <li class='star'   onclick="savePodcastId('<?=$row['id'];?>')"   title='Kötü'  data-value='1>'>
                          <i class='fa fa-star' style="font-size: 24px;"></i>
                        </li>
                        <li class='star'  onclick="savePodcastId('<?=$row['id'];?>')"  title='Eh' data-value='2'>
                          <i class='fa fa-star' style="font-size: 24px;"></i>
                        </li>
                        <li class='star' onclick="savePodcastId('<?=$row['id'];?>')"  title='İyi' data-value='3'>
                          <i class='fa fa-star' style="font-size: 24px;"></i>
                        </li>
                        <li class='star'  onclick="savePodcastId('<?=$row['id'];?>')"  title='Çok İyi' data-value='4'>
                          <i class='fa fa-star' style="font-size: 24px;"></i>
                        </li>
                        <li class='star' onclick="savePodcastId('<?=$row['id'];?>')"  title='Harika' data-value='5'>
                          <i class='fa fa-star' style="font-size: 24px;"></i>
                        </li>
                      </ul>
                    </div>
                  </section>

Это скрипт:

   $(document).ready(function(){

  setDefaultRating();


    // hover
$('#stars li').on('mouseover', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

    // Now highlight all the stars that's not after the current hovered star
    $(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        $(this).addClass('hover');
      }
      else {
        $(this).removeClass('hover');
      }
    });

  }).on('mouseout', function(){
    $(this).parent().children('li.star').each(function(e){
      $(this).removeClass('hover');
    });
  });

   <?php
        $sql = "SELECT * FROM `podcasts` where populer=1" ;
        $result = $conn->query($sql);

        while($row = $result->fetch_assoc()) {
        ?>

  /* 2. Action to perform on click */
  $('#stars<?=$row['id'];?> li').on('click', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently selected
    var stars = $(this).parent().children('li.star');

    for (i = 0; i < stars.length; i++) {
      $(stars[i]).removeClass('selected');
    }

    for (i = 0; i < onStar; i++) {
      $(stars[i]).addClass('selected');
    }

    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars<?=$row['id'];?> li.selected').last().data('value'), 10);

    var podcastId = $("#podcastId").val();
    verify(ratingValue);


  });

        <?php  }?>

});