jQuery hover and click events for a five-star rating
I couldn't see the Unicode stars in 200_success's answer on Chrome, so I made a version of their snippet with SVG stars from an old meta.SO post of mine:



$('.modal-review__rating-order-wrap &gt; span').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    $(this).parent().attr('data-rating-value', $(this).data('rating-value'));
});
/* Initial state */
div.modal-review__rating-order-wrap &gt; span {
    display: block; float: left;
    height: 30px; width: 40px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='30'%3E%3Cpath%20d='M17.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23c0c0c0'%20stroke='%23c0c0c0'/%3E%3Cpath%20d='M57.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23ffd83d'%20stroke='%23eac328'/%3E%3C/svg%3E");
    background-position: 0px 0px;    /* gray star */
}

/* Persistent state */
div.modal-review__rating-order-wrap[data-rating-value] &gt; span {
    background-position: -40px 0px;  /* gold star */
}
div.modal-review__rating-order-wrap &gt; span.active ~ span {
    background-position: 0px 0px;    /* gray star */
}

/* Hover state */
div.modal-review__rating-order-wrap[class]:hover &gt; span {
    background-position: -40px 0px;  /* gold star */
}
div.modal-review__rating-order-wrap[class] &gt; span:hover ~ span {
    background-position: 0px 0px;    /* gray star */
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="modal-review__rating-order-wrap"&gt;
  &lt;span data-rating-value="1"&gt;&lt;/span&gt;
  &lt;span data-rating-value="2"&gt;&lt;/span&gt;
  &lt;span data-rating-value="3"&gt;&lt;/span&gt;
  &lt;span data-rating-value="4"&gt;&lt;/span&gt;
  &lt;span data-rating-value="5"&gt;&lt;/span&gt;
&lt;/div&gt;




Note that I had to add [class] as a specificity hack to the last two CSS selectors, since otherwise the third selector (with .active) would override them.  (In 200_success's version, the :after pseudo-classes effectively serve the same function, but my version doesn't use them.)

I also made the inner spans into floating blocks to eliminate any whitespace gaps between them, since those cause annoying "blinking" effects when moving the mouse over the gap.  Flex layout on the outer div could be used to achieve the same effect.

Note that I've marked this "answer" as Community Wiki, since it's basically just an addendum to another answer.  I'd have posted it as a comment, but you can't include snippets in comments.  I didn't feel presumptuous enough to edit this into their answer directly, but if 200_success wants to do so, I'm happy to delete this "meta-answer".