mouseover event litsener is not fireing when i move over elements

I’m trying to make a star rating system at an initial stage, the 5 star icon from font awesome deosn’t seem to fire when an even litsener to add to it, i don’t know what i’m doing wrong

html
`

<section class="mx-lg-3 pt-lg-5 pb-5" data-aos="fade-up">
    <div class="container mt-5">
        <div id="confirm-box">{% include "message.html" %}</div>
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-5 col-md-6 mb-3">
                <img src="{{product.image.url}}" class="w-100" alt="product image">
            </div>
            <div class="col-lg-3 col-md-5 product-details">
                <p class="sale text-center">Sale</p>
                <h2>{{product.name|title}}</h2>
                <p>Product id: {{product.id}}</p>
                <div class="ratings">
                    <span class="fa fa-star checked" id="first"></span>
                    <span class="fa fa-star checked" id="second"></span>
                    <span class="fa fa-star checked" id="third"></span>
                    <span class="fa fa-star-half-stroke checked" id="fourth"></span>
                    <span class="fa fa-star" id="fifth"></span>
                </div>
                <p class="product-price">USD ${{product.price}}</p>
                <label for="">Quantity: </label>
                <input type="text" readonly id="product-quantity" value="{{current_item.quantity}}">
                <button id="update-cart" data-product={{product.id}} data-action="add" class="btn add-btn update-cart">Add to cart</button>
            </div>
        </div>
    </div>
</section>

Javascript

`

const one = document.getElementById('first')
const two = document.getElementById('second')
const three = document.getElementById('third')
const four = document.getElementById('fourth')
const five = document.getElementById('fifth')

const arr = [one, two, three, four, five]

one.addEventListener('mouseover', function(event){
    console.log(event.targetS)
    console.log('event is working')
})

arr.forEach(function(item) {
    item.addEventListener('mouseover', function(event) {
        console.log(event.target)
    })

}) 

i’ve tried it with just one of the element and it still doesn’t fire

>Solution :

You’re trying to add the event listener to an element that doesn’t exist in the DOM yet.

To fix this issue, you can move the code that adds the event listener to the elements to a function that gets called when the page has finished loading. You can use the window.onload event to call this function, which will ensure that the elements have been added to the page before you try to add the event listener.

Here’s an example of how you can do this:

window.onload = function() {
  const one = document.getElementById('first')
  const two = document.getElementById('second')
  const three = document.getElementById('third')
  const four = document.getElementById('fourth')
  const five = document.getElementById('fifth')

  const arr = [one, two, three, four, five]

  arr.forEach(function(item) {
    item.addEventListener('mouseover', function(event) {
      console.log(event.target)
    })
  })
}