how to show stars based on user rating?

Question

i woud like to show star based on rating . i can only show one product with rating stars and the other products don't show any star only show rating number. could help to check which part need to change ?

<%- include ('_layouts/header'); -%>
<h1>......Exciting Books.....</h1>
 <hr size="100" width="100%" align="center" color="black">
    <br>
 <div class="row products">
    
    <% savedexcit.forEach(function(products){ %>
            <div class="col-xs-12 col-md-4 p shop-item">
                 <a class="pa" href="/products/<%= products.category %>/<%= products.slug %>">
                    <img class="pimage" src="/product_images/<%= products.id %>/<%= products.image %>" alt="">
                    </a>
                <h3><%= products.title %></h3>
                <b>Rating: <span id=stars></span><%= products.rating %>/5</b>
                <a class="vd" href="/products/<%= products.category %>/<%= products.slug %>">View Details</a>
            </div>
        <% }); %>  
</div>
<script>
 <% savedexcit.forEach(function(products){ %>
document.getElementById("stars").innerHTML = getStars(<%= products.rating %>);

function getStars(rating) {

  // Round to nearest half
  rating = Math.round(rating * 2) / 2;
  let output = [];

  // Append all the filled whole stars
  for (var i = rating; i >= 1; i--)
    output.push('<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;');

  // If there is a half a star, append it
  if (i == .5) output.push('<i class="fa fa-star-half-o" aria-hidden="true" style="color: gold;"></i>&nbsp;');

  // Fill the empty stars
  for (let i = (5 - rating); i >= 1; i--)
    output.push('<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;');

  return output.join('');

}
<% }); %>  
</script>
    <%- include ('_layouts/footer'); -%>

output result:

Answer 1

you can use jquery library:

https://www.jqueryscript.net/other/rating-star-icons.html

<div id="dataReadonlyReview"
 data-rating-stars="5"
 data-rating-readonly="true"
 data-rating-value="3"
 data-rating-input="#dataReadonlyInput">

and you can see : Turn a number into star rating display using jQuery and CSS