JavaScript returns value on the first review only, l don't know why

Am having a problem but l nor know what brings it.

When I try to loop the Django to for JavaScript to display the Stars, it returns only on the first review and the rest it returns nothing.

Now what can't do so that each user who adds a rating it displays it's stars not displaying only the first one?

Below it's my HTML and JavaScript below

Even l added also an image for results if try to reflesh the page.

Html

 {% for review in reviews %}
   <p>display of numbers </p>
   <option value="{{ review.rating }}" id="hours"></option>
<div class="staz">
<p id="demo"></p>
{% endfor %}

JavaScript

<script>
    let hour = document.getElementById('hours').value;
    let greetings;
        if (hour == 1){
            greetings = "★";
        }
        else if (hour == 2){
            greetings = "★★"
        }
        else if(hour == 3){
            greetings = "★★★"
        }
        else if(hour == 4){
            greetings = "★★★★"
        }
        else if(hour == 5){
            greetings = "★★★★★";
        }
        document.getElementById('demo').innerHTML = greetings
</script>

Results

I expected that each review, it returns it's stars.

You can change your id to class then using querySelectorAll get all element which has hours class and assign required star to div .

So, your django code will be change to :

{% for review in reviews %}
 <!--...some codes added class here -->
   <option value="{{ review.rating }}" class="hours"></option>
<div class="staz">
<p class="demo"></p> <!--added class here -->
{% endfor %}

Demo Code :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const hours_div = document.querySelectorAll('.hours');
hours_div.forEach(function(item) {
  var hour = item.value;
  var greetings = ''
  if (hour == 1) {
    greetings = "★";
  } else if (hour == 2) {
    greetings = "★★"
  } else if (hour == 3) {
    greetings = "★★★"
  } else if (hour == 4) {
    greetings = "★★★★"
  } else if (hour == 5) {
    greetings = "★★★★★";
  }
  item.nextElementSibling.children[0].innerHTML = greetings
})

<!-- language: lang-html -->

<p>display of numbers </p>
<option value="4" class="hours"></option>
<div class="staz">
  <p class="demo"></p>
</div>

<p>display of numbers </p>
<option value="3" class="hours"></option>
<div class="staz">
  <p class="demo"></p>
</div>

<p>display of numbers </p>
<option value="2" class="hours"></option>
<div class="staz">
  <p class="demo"></p>
</div>

<p>display of numbers </p>
<option value="1" class="hours"></option>
<div class="staz">
  <p class="demo"></p>
</div>

<!-- end snippet -->