Звезды JavaScript не светятся после того, как я нажал на звезду?

Я внедрил систему рейтинга звезд, используя " Создание Ajaxified Star Rating System в Rails 3 ".

После изменения кода все работает на индексной странице, но по какой-то причине звезды не остаются светящимися после того, как я нажал их. Я думаю, что есть проблема в моем JavaScript. Есть ли способ сделать это через CSS?

Если вам нужно, чтобы я добавил что-нибудь еще, сообщите мне.

rating_ballot.js:

$(document).ready(function() {

  ### Makes stars stay glowing after click.
  ### But after its clicked, the value is saved, But the star doesn't stay glowing. 

  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });


  ### Submits the form & saves data. 
  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS:

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

index.hrml.erb (книги):

<% @books.each do |book| %>
  <table id="book_<%= book.id %>">
    <tbody>  
      <tr>  
        <td>
          <%= book.title %>
        </td> 
      </tr> 

      <tr>

        <td  id="rating">                   
          <%= render :partial => 'ratings/rating', :locals =>{:book => book} %>
        </td>

      </tr>
    <tbody>
  </table>
<% end %>

_rating.html.erb:

<%= form_for(rating_ballot(book.id), remote: true, :html => { :class => 'rating_ballot' }) do |f| %>

  <% sfx = "value_#{book.id}_1" %>
  <%= f.label(sfx, content_tag(:span, '1'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_2" %>
  <%= f.label(sfx, content_tag(:span, '2'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 2, current_user_rating(book.id) == 2, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_3" %>
  <%= f.label(sfx, content_tag(:span, '3'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 3, current_user_rating(book.id) == 3, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_4" %>
  <%= f.label(sfx, content_tag(:span, '4'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 4, current_user_rating(book.id) == 4, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_5" %>
  <%= f.label(sfx, content_tag(:span, '5'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 5, current_user_rating(book.id) == 5,
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <%= hidden_field_tag("book_id", book.id) %>
  <%= f.submit :Submit, style: "display: none" %>

<% end %>

create.js.erb и update.js.erb:

$('#book_<%= @book.id%> #rating').html("<%= escape_javascript(render :partial => 'ratings/rating', :locals => {:book => @book}) %>");

Помощники:

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

HTML-код в инструментах разработчика

index.html.erb

Код перед тем, как открыть таблицу

<table class="table" id="book_1176">...</table>
<table class="table" id="book_1177">...</table>
<table class="table" id="book_1178">...</table>
<table class="table" id="book_1179">...</table>

Код После открытия таблицы

<table class="table" id="book_1176">
  <tbody>  
    <tr>
      <td id="rating">                         
        <form accept-charset="UTF-8" action="/ratings/1093" class="rating_ballot" data-remote="true" id="edit_rating_1093" method="post">

        <div style="margin:0;padding:0;display:inline" class="bright">
        <input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM="></div>

        <label class="rating bright" for="rating_value_1176_1"><span>1</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_1" name="rating[value]" type="radio" value="1">

        <label class="rating bright" for="rating_value_1176_2"><span>2</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_2" name="rating[value]" type="radio" value="2">

        <label class="rating bright" for="rating_value_1176_3"><span>3</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_3" name="rating[value]" type="radio" value="3">

        <label class="rating bright" for="rating_value_1176_4"><span>4</span></label>
        <input checked="checked" class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_4" name="rating[value]" type="radio" value="4">

        <label class="rating" for="rating_value_1176_5"><span>5</span></label>
        <input class="rating_button #{bright?(i, book.id)}" id="rating_value_1176_5" name="rating[value]" type="radio" value="5">

        <input id="book_id" name="book_id" type="hidden" value="1176">
        <input name="commit" style="display: none" type="submit" value="Submit">

      </form>     

     </td>
    </tr> 
  </tbody>
</table>