我的jQuery函数有什么问题??尝试使用按钮进行评级

这里我有我的jQuery函数来选择按钮,如果我只是将一个函数与一个选择(注释第1部分-第1部分结束)结合使用,我的代码工作得很好。

但是结合第二个函数/html第2部分,我的代码不再正常工作!

错误在哪里?

这里你可以看到问题,我可以在第一行选择,但当我想在第二行选择另一个值时,第一行的选择被取消选择/禁用。

总之,我只能在一行中选择一个值

<script> 
    jQuery(document).ready(function($){
        
      $(".btnrating").on('click',(function(e) {
      
      var previous_value = $("#selected_rating").val();
      
      var selected_value = $(this).attr("data-attr");
      $("#selected_rating").val(selected_value);
      
      $(".selected-rating").empty();
      $(".selected-rating").html(selected_value);
      
      for (i = 1; i <= selected_value; ++i) {
      $("#rating-star-"+i).toggleClass('btn-warning');
      $("#rating-star-"+i).toggleClass('btn-default');
      }
      
      for (ix = 1; ix <= previous_value; ++ix) {
      $("#rating-star-"+ix).toggleClass('btn-warning');
      $("#rating-star-"+ix).toggleClass('btn-default');
      }
      }));
    });

    
    jQuery(document).ready(function($){

   $(".btnrating").on('click',(function(f) {
      
    var previous_value = $("#selected_heart").val();
      
    var selected_value = $(this).attr("data-heart");
    $("#selected_heart").val(selected_value);
      
    $(".selected-heart").empty();
    $(".selected-heart").html(selected_value);
      
    for (i = 1; i <= selected_value; ++i) {
    $("#rating-heart-"+i).toggleClass('btn-warning');
    $("#rating-heart-"+i).toggleClass('btn-default');
    }
      
    for (ix = 1; ix <= previous_value; ++ix) {
    $("#rating-heart-"+ix).toggleClass('btn-warning');
    $("#rating-heart-"+ix).toggleClass('btn-default');
    }
      
    }));
    });
</script>

这是我的HTML: 仅第1部分就行了。

<!-- Part 1 Start -->
<div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>How did you like the food?</h4>
        </h2>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="5" id="rating-star-5">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
      <span class="selected-rating">0</span><small> / 5</small>
    </div>
  <!-- Part 1 End -->


  <!-- Part 2 Start -->
  <div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_heart" name="selected_heart" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>how satisfied were you with the food?</h4>
        </h2>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="1" id="rating-heart-1">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="2" id="rating-heart-2">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="3" id="rating-heart-3">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="4" id="rating-heart-4">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="5" id="rating-heart-5">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
      <span class="selected-heart">0</span><small> / 5</small>
    </div>
  <!-- Part 2 End -->