title: Star rating system problem, need to click twice for it to be highlighted
body: <p>I have problem with my star rating system. The star rating functioning well, but the star only be highlighted when I clicked it twice. For example, if I want to rate 3/5, I will need to click the star number 3 for two times for it to be highlighted. How do I make it to only single click? :/ Thank you! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function firstRating() {
    const star = document.querySelector(".rating").children;
  
    for (let i = 0; i &lt; star.length; i++) {
      star[i].addEventListener("click", function() {
        for (let j = 0; j &lt; star.length; j++) {
          star[j].classList.remove("fa", "fa-star-o");
          star[j].classList.add("fa", "fa-star");
        }
  
        for (let j = 0; j &lt;= i; j++) {
          star[j].classList.remove("fa", "fa-star-o");
          star[j].classList.add("fa", "fa-star");
        }
      });
    }
  }
  
  function secondRating() {
    const star = document.querySelector(".rating_2").children;
  
    for (let i = 0; i &lt; star.length; i++) {
      star[i].addEventListener("click", function() {
        for (let j = 0; j &lt; star.length; j++) {
          star[j].classList.remove("fa", "fa-star-o");
          star[j].classList.add("fa", "fa-star");
        }
  
        for (let j = 0; j &lt;= i; j++) {
          star[j].classList.remove("fa", "fa-star-o");
          star[j].classList.add("fa", "fa-star");
        }
      });
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="form-group" onclick="firstRating()"&gt;
    &lt;label class="col-lg-5 col-md-4 control-label" for="firstRating"&gt;Experience&lt;/label&gt;
    &lt;div class="rating col-lg-7" style="float: right"&gt;
      &lt;input type="hidden" name="rating_1" id="rating_1" value="0" /&gt;
      &lt;span class="fa fa-star-o" id="rate1"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="rate2"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="rate3"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="rate4"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="rate5"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group" onclick="secondRating()"&gt;
    &lt;label class="col-lg-5 col-md-4 control-label" for="secondRating"&gt;Speed&lt;/label&gt;
    &lt;div class="rating_2 col-lg-7" style="float: right"&gt;
      &lt;input type="hidden" name="rating_2" id="rating_2" value="0" /&gt;
      &lt;span class="fa fa-star-o" id="ratee1"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="ratee2"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="ratee3"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="ratee4"&gt;&lt;/span&gt;
      &lt;span class="fa fa-star-o" id="ratee5"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>