<div class="rating-container">
        <input class="rating-input" type="radio" name="rating" id="rate-5" value="5">
        <label class="rating-label" for="rate-5"><i class="fas fa-star"></i></label>

        <input class="rating-input" type="radio" name="rating" id="rate-4" value="4">
        <label class="rating-label" for="rate-4"><i class="fas fa-star"></i></label>

        <input class="rating-input" type="radio" name="rating" id="rate-3" value="3">
        <label class="rating-label" for="rate-3"><i class="fas fa-star"></i></label>
        
        <input class="rating-input" type="radio" name="rating" id="rate-2" value="2">
        <label class="rating-label" for="rate-2"><i class="fas fa-star"></i></label>
        
        <input class="rating-input" type="radio" name="rating" id="rate-1" value="1">
        <label class="rating-label" for="rate-1"><i class="fas fa-star"></i></label>
    </div>
    <div class="rating-output">0 <i class="fas fa-star"></i></div>
                        
                    

   
                        
    const ratingLabels = document.querySelectorAll(".rating-label")
    const ratingInputs = document.querySelectorAll(".rating-input")
    const ratingOutput = document.querySelector(".rating-output")

    ratingLabels.forEach((label, index) => {
        label.addEventListener("click", () => {
            ratingOutput.innerHTML = `${ratingInputs[index].value} <i class="fas fa-star"></i>`
        })
    })