jQuery stars rating message reflects on all items

Question

I have created a stars rating in jQuery but for example when I rate the first item (for instance 2 stars) the message reflecting this rating will show on all items even if not rated. This is the jQuery portion that creates the HTML

'<section  class ="rating-widget"><div class="rating-stars text-center"><ul id="stars"><li class="star" title="Poor" data-value="1"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Fair" data-value="2"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Good" data-value="3"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Excellent" data-value="4"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Perfect" data-value="5"><i class="fa fa-star fa-fw"></i></li></ul></div>' +
                    '<div class="success-box"><div class="clearfix"></div><div class="text-message"></div><div class="clearfix"></div></div></section>';

This is the jQuery code that creates the rating functionality

  /* 1. Visualizing things on Hover - See next part for action on click */
            $('#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');
                });
            });


            /* 2. Action to perform on click */
            $('#stars 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 li.selected').last().data('value'), 10);
                var msg = "";
                if (ratingValue > 1) {
                    msg = "Thanks! You rated this " + ratingValue + " stars.";
                } else {
                    msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
                }
                responseMessage(msg);

            });

            function responseMessage(msg) {
                $('.success-box').fadeIn(200);
                $('.success-box div.text-message').html("<span>" + msg + "</span>");
            }

This image shows how the message is displaying on all items enter image description here

Answer 1

You will need to get more specific with your jQuery. Your $('#stars li') is most likely too general. Maybe group the items stars in separate divs such that they can be referenced more specifically. If your jQuery effects too many elements, it just means that your id's and/or class references are too general.