jQuery rateYo plugin that continue rating after rated star click?

Question

I tried but I did not resolve problem about perfect jquery plugin named rateYo.

I prepared a sample on this page:

http://jsfiddle.net/a1oewfwn/

$(".rateYo").rateYo({
  onSet: function(rating, rateYoInstance) {
    $(this).next().val(rating);
  },
  rating: 0,
  starWidth: "20px",
  numStars: 5,
  fullStar: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">

If you click on any star, let's say you click on 3rd star in row 2, it fixes all three rows to 3rd star while you move your mouse over from the first to fifth.

I want achieve, that all three rows are fixed to the last selection.

How can I solve this?

Answer 1

Setting the plugin individually seems to work

$(".rateYo").each(function (e) {
    $(this).rateYo({
        onSet: function (rating, rateYoInstance) {
            $(this).next().val(rating);
        },
        rating: 0,
        starWidth: "20px",
        numStars: 5,
        fullStar: true
    });
});

$(".rateYo").each(function(e) {
      $(this).rateYo({
        onSet: function(rating, rateYoInstance) {
          $(this).next().val(rating);
        },
        rating: 0,
        starWidth: "20px",
        numStars: 5,
        fullStar: true
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">