html - Star ratings not expected behaviour -

i understand using same ids , names , might causing issue.

the star rating segment that:

<span class="rating">   <tr>     <td>quality</td>     <td>       <span class="rating">       <% (1..5).each_with_index |quality, i| %>         <%= radio_button_tag "rating-input-1-#{i+1}", quality, endorsement.quality == quality, class: 'rating-input', id: "rating-input-1-#{i+1}" %>         <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>       <% end %>     </span>     </td>    </tr>   <tr>     <td>cost</td>     <td>       <span class="rating">       <% (1..5).each_with_index |cost, i| %>         <%= radio_button_tag "rating-input-1-#{i+1}", cost, endorsement.cost == cost, class: 'rating-input', id: "rating-input-1-#{i+1}" %>         <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>       <% end %>     </span>     </td>   </tr>   <tr>     <td>time</td>     <td>       <span class="rating">       <% (1..5).each_with_index |time, i| %>         <%= radio_button_tag "rating-input-1-#{i+1}", time, endorsement.time == time, class: 'rating-input', id: "rating-input-1-#{i+1}" %>         <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>       <% end %>     </span>     </td>   </tr>   <tr>     <td>experience</td>     <td>       <span class="rating">       <% (1..5).each_with_index |experience, i| %>         <%= radio_button_tag "rating-input-1-#{i+1}", experience, endorsement.experience == experience, class: 'rating-input', id: "rating-input-1-#{i+1}" %>         <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>       <% end %>       </span>     </td>   </tr>   <tr>     <td>communication</td>     <td>       <span class="rating">       <% (1..5).each_with_index |communication, i| %>         <%= radio_button_tag "rating-input-1-#{i+1}", communication, endorsement.communication == communication, class: 'rating-input', id: "rating-input-1-#{i+1}" %>         <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>       <% end %>       </span>     </td>   </tr> </span> 

which shows as:

i did place css styles make work expected , renders this (too long place here).

when click on of stars fills 1 stars chose , cannot select other stars different rating aspect. not experienced html tags tip or guidance right direction surely me understand/going.

i found problem:

you using same name label for in html..

** that's why everytime click it's affecting first line..

fixed demo

example

in second .rating span need replace this:

<input class="rating-input" id="rating-input-1-1" name="rating-input-1-1" type="radio" value="1" /> <label class="rating-star" for="rating-input-1-1">rating-input-1-1</label> 

to this:

 <input class="rating-input" id="rating-input-2-1" name="rating-input-2-1" type="radio" value="1" />  <label class="rating-star" for="rating-input-2-1">rating-input-2-1</label> 

nice solution css btw.