Text To Star Rating

HTML

<script src="stars.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Rating With Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container" id="container">
      <div class="rating" id="rating">1.2</div>
      <div class="rating" id="rating">3.2</div>
      <div class="rating" id="rating">4.8</div>
      <div class="rating" id="rating">5</div>
      <div class="rating" id="rating">2.6</div>
    </div>

    <script src="stars.js"></script>
  </body>

</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container{
    margin:10rem auto;
    border: 1px solid red;
    width: 100px;
}
.ratingsContainer{
display: flex;
min-height:1.5rem;
justify-content: space-between;
align-items: center;
max-width: 100%;
border: 1px solid red;
}

.starContainer{
    width: 1rem;
    height: 1rem;
    /* border: 1px solid red; */
    position: relative;
    
}
.starFill{
    /* width:50%; */
    /* border: 5px solid green; */
    overflow: hidden;
    
}
.starOutline{
    width:1rem;
    height: 1rem;
    /* border: 2px solid blue; */
    position: absolute;
    top: 0;
}
.starFill img{
    width:1rem;
    height: 1rem;
    
}
.starOutline img{
    width:1rem;
    height: 1rem;
}

JavaScript

//get the parent div (.container)
const ratingsContainer = document.getElementById('container');
//get all the ratings on the page so we cn iterate through them
const ratings = ratingsContainer.getElementsByClassName('rating');

//create new ratings container
for (let i = 0; i < ratings.length; i++) {
  const ratingScore = parseFloat(ratings[i].innerHTML).toFixed(1);
  //full stars required
  const fullStars = Math.floor(ratingScore);

  //fractional stars required
  const fractionalStars = ratingScore.split('.')[1] * 10;

  //left over stars (empty stars)
  let emptyStars;
  emptyStars = fullStars < 5 ? 5 - fullStars - 1 : 0;
  // emptyStars = 5 - Math.floor(ratingScore) - 1;
  // console.log(emptyStars);

  const newRatingsContainer = document.createElement('div');
  newRatingsContainer.className = 'ratingsContainer';

  //Add full stars to ratings container
  for (let i = 0; i < fullStars; i++) {
    const newstarContainer = document.createElement('div');
    newstarContainer.className = 'starContainer';

    const starFill = document.createElement('div');
    starFill.className = 'starFill';
    const starFillImage = document.createElement('img');
    starFillImage.src = 'https://marchv.net/images/star.svg';

    const starOutline = document.createElement('div');
    starOutline.className = 'starOutline';
    const starOutlineImage = document.createElement('img');
    starOutlineImage.src = 'https://marchv.net/images/outline.svg';
    const newstarContainerFill = newstarContainer
      .appendChild(starFill)
      .appendChild(starFillImage);
    const newstarContainerOutline = newstarContainer
      .appendChild(starOutline)
      .appendChild(starOutlineImage);
    document
      .getElementById('container')
      .appendChild(newRatingsContainer)
      .appendChild(newstarContainer);
  }

  //Add fractional star to ratings container
  for (let i = 0; i < 1; i++) {
    const newstarContainer = document.createElement('div');
    newstarContainer.className =...