Q:

Need to make js work multiple times in a star rating system,bootstrap

everyone. 
I am using a simple star rating system,and I used it on the page 3 times.  When i click one ,the other 2 take the same value.  Need to make the js work for each one.  Please be kind,I am a noob in js.  
Thanks in advance. 
HTML
<div class="star-rating" id="star-rating-2"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="rating-stars" class="rating-value" value="1">
</div>

JavaScript
var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();

A:

I guess you are looking on something like this, please check 
http://jsfiddle.net/unb3n8s1/3/, you need to find parent element and loop only on his children
var $star_rating = $('.star-rating .fa');

var SetRatingStar = function($star_rating_parent) {
  return $star_rating_parent.find('.fa').each(function() {
    if (parseInt($star_rating_parent.find('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $(this).siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar($(this).parent());
});

