RateYo plugin with array

Question

I am working on a page with some star ratings and I'm using the rateYo plugin (http://rateyo.fundoocode.ninja) for this. Everything works fine if I use one star rating, but I'll need to use it dynamically with numerous instances on this page that will be getting product data from a database. My initial idea was to use classes versus an ID to have more than one on the page and use a loop with some mock data like this:

var demoRatings = [3.5, 4, 2, 1.5, 5, 4.5, 2.5, 1],
    stars       = $('.rateYo');

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').rateYo({
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
};

While I get no errors trying this and it shows all rating sections, it only displays the the stars with the first item in the array (3.5). Any idea of what I'm missing here or if this can be used like this? I'll include the fiddle link and use a code snippet below. Thanks for the help guys.

jsfiddle: https://jsfiddle.net/m6fyem7e/5/

var demoRatings = [3.5, 4, 2],
    stars       = $('.rateYo');

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').rateYo({
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

Answer 1

The problem lies on that you are trying to change the RateYo settings on an element that was already initialized. If for example you'd change your code to

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').eq(i).rateYo({ // select by index as an example
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
}

it will work.

Here's an example using the data- attribute from the element.

$('.rateYo').each(function() {
  $(this).rateYo({
    halfStar: true,
    rating: this.dataset.rating,
    readOnly: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo" data-rating='5'></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
  </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo" data-rating='3'></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
  </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo" data-rating='2.5'></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
  </div>
</div>