Horizontal Scrolling like Netflix for each Publishers

I've developed an app that has many publishers who have many characters. Each character also has many books. With that, I am trying to develop an interface that scrolls horizontally similar to .

Everything is displayed and works properly, BUT for some reason the Javascript only scrolls through the first Publisher's Books in the INDEX PAGE. And when I try to hover and scroll any other Publisher Books, it will only Horizontally Scroll the First Publishers Books.

I know I need to somehow pass the publisher_id along with the javascript so that it will work for all the publishers in my index page, but I am stuck.

Does anyone know how where I am suppose to pass the publisher_id or how I can fix my Javascript to make it work with all the publishers in the index page?

Models

class Publisher < ActiveRecord::Base

  has_many :characters
  has_many :books, :through => :characters

end


class Character < ActiveRecord::Base

  belongs_to :publisher
  has_many :books

end

class Book < ActiveRecord::Base

  belongs_to :character

end

Views

books.html.erb

<div class="row">

  <%# This lists all the publishers %>
  <div class="publisherbubble">

    <% @publishers.each do |publisher| %>

      <div id="books">
      <%= render :partial => 'static_pages/books', :locals =>{:publisher => publisher} %>
      </div>

    <% end %>

  </div>

</div>

_books.html.erb

<div id="<% publisher.id %>" class = "publisherbox">
  <div class = "slider triangleBtns">

    <div class="scrollmaintitle">
      <%= publisher.name %>
    </div>

    <div id="scroll">    
      <ul class="scrollertitle">     

        <% publisher.characters.sort_by{|character| character.created_at }.each do |character|%>
          <% character.books.each do |book| %>
            <li>
              <%= link_to (image_tag book.photo(:small)), 
                  publisher_character_book_issues_path(:publisher_id => publisher.id, 
                  :character_id => character.id, :book_id => book.id ) %>
            </li>
          <% end %>
        <% end %>

      </ul>
    </div>

    ###For some reason both arrows only work for publisher where ID = 1
    <span class="previous sliderButton" data-scroll-modifier='-1'>
      <div class="arrow">
      </div>
    </span>

    <span class="next sliderButton" data-scroll-modifier='1'>
      <div class="arrow">
      </div>
    </span>

  </div>
</div>

Javascript

$(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#scroll");

    //Start the scrolling process
    $(".sliderButton").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".sliderButton").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

});