星をクリックすると、全ての星が黄色く塗られるという不具合が起きています

https://qiita.com/mfujimori/items/1c8055678a76d64587d9
を参考に、口コミサイトの星をCSSで実装し、「普通」の所をクリックしました。

すると、以下のように全ての星が黄色く変わってしまうという不具合が発生しました。
https://gyazo.com/6a6408472d6750b14bab0b58f2f9a483
（「普通」の箇所をクリックして、この様な事が起きています。）

該当コードは以下の通りです。
dounan_kuchikomi/new.html.erb

<div class="area dounan">
  <h1><%= @dounan.title %></h1>
  <ul class="media-list">
    <div class="row">
      <aside class="col-xs-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <li class="media">
              <h2>レビューを投稿する</h2>
              <%= form_for ([@dounan, @dounan_kuchikomi]) do |f| %>
                <div class="raty" data-rating ="<%= @dounan_kuchikomi.rate %>">
                  <input id="dounan_kuchikomi_rate" type="radio" name="dounan_kuchikomi[rate]" value="5" />
                  <label for="dounan_kuchikomi_rate"><span class="text">最高</span>★</label>
                  <input id="dounan_kuchikomi_rate" type="radio" name="dounan_kuchikomi[rate]" value="4" />
                  <label for="dounan_kuchikomi_rate"><span class="text">良い</span>★</label>
                  <input id="dounan_kuchikomi_rate" type="radio" name="dounan_kuchikomi[rate]" value="3" />
                  <label for="dounan_kuchikomi_rate"><span class="text">普通</span>★</label>
                  <input id="dounan_kuchikomi_rate" type="radio" name="dounan_kuchikomi[rate]" value="2" />
                  <label for="dounan_kuchikomi_rate"><span class="text">悪い</span>★</label>
                  <input id="dounan_kuchikomi_rate" type="radio" name="dounan_kuchikomi[rate]" value="1" />
                  <label for="dounan_kuchikomi_rate"><span class="text">最悪</span>★</label>
                </div>
                <%= f.label :title, '題名' %>
                <%= f.text_field :title, class: 'form-control', rows: 5 %><br />
                <%= f.label :picture, '写真' %>
                <%= f.file_field :picture %><br />
                <%= f.label :content, 'レビュー' %>
                <%= f.text_area :content, class: 'form-control', rows: 5 %>
                <br />
                <%= f.submit '投稿' , class: 'btn btn-success btn-lg'%>
              <% end %>
            </li>
          </div>  
        </div>
      </aside>
    </div>
  </ul>
</div>

application.css(ratyの箇所)

.raty{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.raty input[type='radio']{
  display: none;
}
.raty label{
  position: relative;
  padding: 10px 10px 0;
  color: gray;
  cursor: pointer;
  font-size: 50px;
}
.raty label .text{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: gray;
}
.raty label:hover,
.raty label:hover ~ label,
.raty input[type='radio']:checked ~ label{
  color: #ffcc00;
}

試したこと
関係ないかもしれないが、余分なjavascriptとcssを無効化した。

<!--script src="node_modules/raty-js/vebdor/jquery.js"></script>
    <script src="node_modules/jquery/jquery.raty.js"></script>
    <script src="javascripts/kuchikomis.js"></script>
    <link rel="stylesheet" href="../lib/jquery.raty.css"-->

正しくコードを書いているつもりなのに、なぜこのような不具合が発生するのかを知りたいので、どなたか教えていただけませんでしょうか。