[HTML/CSS] Как реализовать несколько звездных рейтингов на одной странице?

[baldbelka]

Всем привет!
Возник такой вопрос (понимаю,что ничего сложного и вообще вопрос может тупой) но, уже запуталась, да и у опытных не мешало бы узнать. Не ругайте, если что. Я впервые тут.

Есть несколько рейтингов на одной странице. Реализованы через инпуты с лейблами (без js)
Посоветуйте,как лучше реализовать несколько рейтингов со звездами на одной страничке? Каждому диву давать свое имя и свой id? Чтобы они не конфликтовали потом при работе на back-end?
Картинка прилагается,если интересно. И код разметки одного рейтинга. Как бы сделали подобное вы?

<div class="rate">
   <input type="radio" id="star5" name="rate" value="5" />
   <label for="star5" title="text">5 stars</label>

   <input type="radio" id="star4" name="rate" value="4" />
   <label for="star4" title="text">4 stars</label>

   <input type="radio" id="star3" name="rate" value="3" />
   <label for="star3" title="text">3 stars</label>

   <input type="radio" id="star2" name="rate" value="2" />
   <label for="star2" title="text">2 stars</label>
                            
   <input type="radio" id="star1" name="rate" value="1" />
   <label for="star1" title="text">1 star</label>
</div>