A piece of code to help to change class in an row of elements like survey stars

stars.js

/*
  Code to add stars in a satisfaction survey, using font-awesome to change the look of the stars
  HTML structure below:
  
  <label class='fa fa-user-md'>
        <span>Overall Satisfaction</span>
        <span>
            <label class="fa fa-star-o">
                <input type="radio" name="satisfaction" value='0'>
            </label>
            <label class="fa fa-star-o">
                <input type="radio" name="satisfaction" value='1'>
            </label>
            <label class="fa fa-star-o">
                <input type="radio" name="satisfaction" value='2'>
            </label>
            <label class="fa fa-star-o">
                <input type="radio" name="satisfaction" value='3'>
            </label>
            <label class="fa fa-star-o">
                <input type="radio" name="satisfaction" value='4'>
            </label>
        </span>
    </label>
*/
Array.prototype.forEach.call(inputs, function(el) {
    el.addEventListener('click', function(){
        //convert the HTMLCollection Label to JS array
        var stars = [].slice.call(this.parentNode.parentNode.getElementsByTagName('label'));
        var totalStars = stars.length;
        var currentElementPosition = this.value;
        for (i = 0; i < totalStars; i++) {
            if (i <= currentElementPosition) {
                stars[i].className = 'fa fa-star';
            } else {
                stars[i].className = 'fa fa-star-o';
            }
        }
    });
});