Сделайте звездный рейтинг CSS динамическим

Приведенный ниже проект кодового пера состоит из чистого интерфейса css с рейтингом звезд. https://codepen.io/yaworek/pen/JJpEaZ

Ниже приведена часть css:

/***
 *  Simple Pure CSS Star Rating Widget Bootstrap 4 
 * 
 *  www.TheMastercut.co
 *  
 ***/

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/* Styling h1 and links
––––––––––––––––––––––––––––––––– */
h1[alt = "Simple"] {color: white;}
a[href], a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}

.starrating > input {display: none;}  /* Remove radio buttons */

.starrating > label:before { 
  content: "\f005"; /* Star */
  margin: 2px;
  font-size: 2em;
  font-family: FontAwesome;
  display: inline-block; 
  text-shadow: 0px 0px 3px #000;
}

.starrating > label
{
  color: #FFFFFF; /* Start color when not clicked */
}

.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */

.starrating > input:hover ~ label
{ color: #ffca08 ;  } /* Set yellow color when star hover */

Он использует переключатели и CSS для отображения рейтинга. Я хочу добавить по этому поводу дополнительные наборы оценок. Я хочу добавить дополнительные наборы рейтингов, например 5 наборов рейтингов для 5 книг. Теперь проблема в том, что реализация css сбрасывает выбранный рейтинг для одного набора, выбирая рейтинг для другого набора.

Ниже приведена ссылка на кодовое перо для добавленного мной дополнительного набора рейтингов. Проблема в том, что когда я выбираю рейтинг для второго набора, рейтинг для первого набора удаляется. https://codepen.io/brainyprb/pen/BvoqLE

Решается ли это только с помощью css? или мне придется использовать для этого javascript / jquery?