title: Rails HABTM order with select boxes
body: <p>I have two models (code redacted for clarity):</p>
  
  <pre><code>class App &lt; ActiveRecord::Base
    has_and_belongs_to_many :products
  end
  
  class Product &lt; ActiveRecord::Base
    has_and_belongs_to_many :apps
  end
  </code></pre>
  
  <p>I want to be able to add multiple products to each app. Also, the order of the products in the app is important, and where I'm having trouble.</p>
  
  <p>I'm using simple_form and I've tried using the association method:</p>
  
  <pre><code>&lt;%= simple_form_for(@app) do |form| %&gt;
    &lt;%= form.input :name %&gt;
    &lt;%= form.association :products %&gt;
    &lt;%= form.button :submit %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>It works wonderfully, but the select box it creates is not orderable. My attempt at a solution was to create multiple <code>&lt;select&gt;</code> boxes and order them somehow. This so far isn't working. As a test I tried this:</p>
  
  <pre><code>&lt;%= form.collection_select('product_ids', Product.all, :id, :name, {}, {name: 'app[product_ids][]'}) %&gt;
  &lt;%= form.collection_select('product_ids', Product.all, :id, :name, {}, {name: 'app[product_ids][]'}) %&gt;
  &lt;%= form.collection_select('product_ids', Product.all, :id, :name, {}, {name: 'app[product_ids][]'}) %&gt;
  &lt;%= form.collection_select('product_ids', Product.all, :id, :name, {}, {name: 'app[product_ids][]'}) %&gt;
  </code></pre>
  
  <p>It actually does make the association in the database, but it 'selects' all the products for each select tag which ends up just selecting the last product on all of them:</p>
  
  <pre><code>&lt;select id="app_product_ids" name="app[product_ids][]"&gt;
    &lt;option selected="selected" value="1"&gt;Golf Club&lt;/option&gt;
    &lt;option value="20"&gt;Music Disc&lt;/option&gt;
    &lt;option selected="selected" value="17"&gt;Magic Wand&lt;/option&gt;
    &lt;option value="15"&gt;Nike Running Shoes&lt;/option&gt;
    &lt;option selected="selected" value="19"&gt;Watch&lt;/option&gt;
    &lt;option selected="selected" value="16"&gt;Wooden Spoon&lt;/option&gt; // this is what is selected in the browser
  &lt;/select&gt;
  </code></pre>
  
  <p>Eventually, I'll make the adding and removal of these dynamic.</p>
  
  <p>So my question is, how can I make this work? One way would be to have each <code>&lt;select&gt;</code> associate to the particular product instead of all the products. Maybe there's a better way all together.</p>