HTML/CSS - Rating stars using CSS dataset method with pure JS Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
      
        <div class="stars" data-stars="1">
          <svg height="20" width="20" class="star rating" data-rating="1">
            <polygon width="0" height="1" points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
          </svg>
          <svg height="25" width="20" class="star rating" data-rating="2">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
          </svg>
          <svg height="25" width="20" class="star rating" data-rating="3">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
          </svg>
          <svg height="25" width="20" class="star rating" data-rating="4">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
          </svg>
          <svg height="25" width="20" class="star rating" data-rating="5">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
          </svg>
        </div>  
        
        <script>
            var starRatings = document.querySelectorAll('.star.rating');

css

.stars {
  cursor: pointer;
  /*transform: translateX(100px) translateY(100px) scale(1.5);*/
  
  
}
.stars:hover .star polygon {
  fill:  #ffd055 !important;
}
.stars .star {
  float: left;
}
.stars .star polygon {
  fill:  #d8d8d8;
}
.stars .star:hover ~ .star polygon {
  fill:  #d8d8d8 !important;
}
.stars[data-stars] .star polygon {
  fill:  #ffd055;
}
.stars[data-stars="1"] .star:nth-child(1) ~ .star polygon {
  fill:  #d8d8d8;
}
.stars[data-stars="2"] .star:nth-child(2) ~ .star polygon {
  fill:  #d8d8d8;
}
.stars[data-stars="3"] .star:nth-child(3) ~ .star polygon {

BROWSER

Console