jQuery MultiSelect Plugin SumoSelect not binding to multiple instances on single page

Question

I am looping through an object, and for each instance in the loop I want to provide a multi-select dropdown (using jQuery plugin SumoSelect). However, right now, SumoSelect only seems to bind to the first multiselect dropdown in the loop, and not any dropdowns afterward. How can each dropdown in the loop have the SumoSelect effects? (there is an open issue on this on Github)

Looking at the console, I see that the first dropdown has attached: div class="SumoSelect" tabindex="0">, but this does not apply to the other examples.

I have tried a few different options and looked at the source code (and googled a bunch), but am unclear on what I need to do differently.

Here is a simplified example. Let's say I have a class "post" that can have many "authors". On the page where I show the "posts", I want to loop through the posts, and for each post, give the user a multiselect dropdown from which to choose authors to add to the post. Right now, the author dropdown for the first post from the loop has the correct SumoSelect effects, but there is no SumoSelect on any posts after that:

posts/view.html.erb (this dropdown creates a join table entry for posts and authors--the controller code to do this works fine, problem is just binding of SumoSelect after first dropdown in loop):

<% @posts.each do |post| %>
....
<select id="author-choice" name="author_ids[]"  multiple="true">
  <% Author.all.each do |author| %>
     <option value="<%= author.id%>",<%= author.name %></option>
  <% end %>
</select> ...

In my javascript, I have:

$(document).ready(function (){ 
  $('#author-choice').SumoSelect();
});

Answer 1

Your problem is that every dropdown has the same ID, and IDs are intended to be unique. Change your select element so that author-choice is a class (class='author-choice') and change the jQuery selector to $('.author-choice'). If that still doesn't solve the problem, it's now SumoSelect's fault, and you'll have to wrap the line applying SumoSelect with an iterator:

$('.author-choice').each(function() {
    $(this).SumoSelect();
});