Передайте уникальные идентификаторы в Javascript для горизонтальной прокрутки

Я пытаюсь разработать интерфейс, который прокручивает по горизонтали аналогично Netflix

.

Все отображается и работает должным образом, но по какой-то причине Javascript просматривает только первые книги издателей на странице INDEX PAGE. И когда я пытаюсь навести курсор и прокрутить любые другие книги издателей, он будет только горизонтально прокручивать первые книги издателей.

Я знаю, что у меня есть # scroll, появляющийся много раз, поэтому JQuery видит только первый.

Кто-нибудь знает, как я могу передать уникальный publisher_id или класс, чтобы он работал со всеми издателями?

модели

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

Просмотры

books.html.erb

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

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

      <div class = "publisherbox">
        <div class = "slider triangleBtns">

          ###renders all the books
          <%= render :partial => 'static_pages/books', :locals =>{:publisher => publisher} %>

        </div>  
      </div>

    <% end %>

  </div>

_books.html.erb

  ###How can I pass/use a unique ID or class to make this work?
  <div class="scroll-container">

      <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>

      <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>

Javascript

$(function () {

    var scrollHandle = 0,
        scrollStep = 5,

        ###How can I pass/use a unique ID or class to make this work?
        parent = $(this).closest('.scroll-container');

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

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

        startScrolling(direction, scrollStep, parent);
    });

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

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

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

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

});

CSS

.scroll-container {
  width:auto;
  height: 100%;
  background: transparent;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 5px;
}