Why all the other dropdown-buttons drop their menues when only one dropdown-button is clicked?

Question

I have this in my view: (buttons are just taken from foundation http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html)

- books.each do |book|
  .row
    .panel
      .row
        .small-9 class='columns'
          ul
            li
              = link_to "#{book.name}", book_path(book)
        .small-3 class='columns'
          - if current_user.books.exists?(book.id)
            button[href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Read
            ul[id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true"]
              li
                = link_to "Remove from my read list", delete_from_my_books_path(book)
            break
          - else
            button[href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Not read
            ul[id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true"]
              li
                = link_to "Add to my read list", add_to_my_books_path(book)

So, if a book has already been read by user, the text on the button is "Read" and there is an option "remove from read list" when you click it. However, when you click the button, all the buttons near other books drop their menus as well.

Moreover, as you can see, these menus move down as well as their values (Add or remove depending on whether user read it or not)

So, I'm sure it happens because of the loop books.each do. But if I remove it, I'll not be able to use my methods 'add_to_my_books_path(book)' and etc. Please share your ideas, if you may know how to make these drop-downs not to live their own life separately from their buttons and how make them not clicking all together. Thank you in advance!

Answer 1

All of your dropdowns have the same id. Try building the dropdown id from something like the book.id:

- books.each do |book|
  .row
    .panel
      .row
        .small-9 class='columns'
          ul
            li
              = link_to "#{book.name}", book_path(book)
        .small-3 class='columns'
          - dropdown_id = "drop#{book.id}"
          - if current_user.books.exists?(book.id)
            button[href="#" data-dropdown=dropdown_id aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Read
            ul[id=dropdown_id data-dropdown-content class="f-dropdown" aria-hidden="true"]
              li
                = link_to "Remove from my read list", delete_from_my_books_path(book)
            break
          - else
            button[href="#" data-dropdown=dropdown_id aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Not read
            ul[id=dropdown_id data-dropdown-content class="f-dropdown" aria-hidden="true"]
              li
                = link_to "Add to my read list", add_to_my_books_path(book)