JQuery + CSS code to make a simple rating widget based on Fontawesome. Nothing fancy but I don't want to figure out how to do it again.
Based on the example found here: http://css-tricks.com/star-ratings/ which unfortunately provides only CSS and no actual functionality.
See it on Plunker: https://plnkr.co/vptHYAnWHMbX2LfR6a02
Basic accessibility features suggested by @7mary4
This is not accessible. You could improve this by
Here's a modification of your code that helps. https://plnkr.co/edit/By43OZmVVzJDOjwIRoy3?p=preview
The interaction is still clumsy.
It would be better if you simply used radio buttons instead of list items. Semantic markup is always the best place to start.