Q:

Star Rating System is not Updating Correctly when I hide Radio Buttons

I've implemented a Star Rating System using this tutorial http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3 
Everything works in the SHOW PAGE and the INDEX PAGE, Until I hide the Radio Buttons and use the corresponding label to input the value. For some reason the Javascript only updates the first Book in the INDEX PAGE. And when I click other Book Ratings, it still only Updates the First Book. 
This only happens when I use the label to Submit the Value, Otherwise if I don't hide the radio buttons, it works fine as long as I click on the Radio Button. 
To my understanding, my labels may all be using the same ID since clicking on the actual Radio Button works just fine. How can I select radio buttons using labels while running through the loop??
New to rails please help :)
JAVASCRIPT
rating_ballot.js
$(document).ready(function() {

    ### Makes stars glow on hover.
  $('form.rating_ballot > label').hover(
    function() {    // mouseover
        $(this).prevAll().andSelf().addClass('glow');
    },function() {  // mouseout
        $(this).siblings().andSelf().removeClass('glow');
  });

  ### Makes stars stay glowing after click.
  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });

  ### Submits the form & saves data. 
  ### But only with the first Book when i click on the label

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS
### The code doesn't work when i hide the radio buttons to display stars/labels

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'); }

VIEWS
show.html.erb (show)
<div id="book_<%= @book.id %>">
 <div id="rating">
   <%= render :partial => 'ratings/rating', :locals =>{:book => @book} %>
 </div>
</div>

index.hrml.erb (books)
<% @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), :html => { :class => 'rating_ballot' }, remote: true ) do |f| %>

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

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

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

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

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

  <%= 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}) %>");

CONTROLLER
class RatingsController < ApplicationController
  before_filter :current_user, only: [:create, :update]

  respond_to :html, :js

  def create
    @book = Book.find_by_id(params[:book_id])
    @rating = Rating.create(params[:rating])    
    @rating.book_id = @book.id
    @rating.user_id = current_user.id
    if @rating.save
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

  def update
    @book = Book.find_by_id(params[:book_id])
    @rating = current_user.ratings.find_by_book_id(@book_id)
    if @rating.update_attributes(params[:rating])
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

end

HELPERS
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 CODE IN DEVELOPER TOOLS
index.html.erb
###Before I open a Table

<table class="table id="book_574">_</table>
<table class="table id="book_575">_</table>
<table class="table id="book_576">_</table>

###After I open a the First Two Tables

<table class="table id="book_574">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1090" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1090" method="post">

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

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input checked="checked" class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="574">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

<table class="table id="book_575">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1091" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1091" 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>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input checked="checked" class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="575">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

A:

You have duplicate ids on your radio buttons so the second set of <label>s will activate the first set of radio buttons; you also have duplicate ids on your <td id="rating"> elements so your HTML is doubly invalid. You can see the <label> problem in action here:
http://jsfiddle.net/ambiguous/fXRK7/
click on the black boxes (those are placeholders for your stars) and watch the radio buttons, you should see that the second row of boxes active the first row of radio buttons.
You need something to make your radio button ids unique. If you're only going to be including your _rating.html.erb partial once per book per page then you could use the book.id that you already have to make unique ids for your radio buttons:
<% sfx = "value_#{blog.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}") %>
...

There's rarely a need for ids on <label>s so I dropped those too. That should get everything linked up properly.

