title: Disabling Rails form_for submit button in a do/end block
body: <p>I currently have a form nested in a do/end block, so for every object that's created, it'll have its' own dropdown menu:</p>
  
  <pre><code>&lt;% @shows.each do |show| %&gt;  
    &lt;%= form_for show, :url =&gt; show_record_path(:show_id =&gt; show.id), method: :post do |f| %&gt;
      &lt;%= f.select :box_id, Box.all.collect { |p| [ p.box_number, p.id ] }, class: "show-radio-button", :include_blank =&gt; true %&gt;
    &lt;%= f.submit "Record", data: { disable_with: "Please wait.." }, :disabled =&gt; true, class: "record-button" %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>And here is my jQuery that enables the submit button if an option from the dropdown has been selected:</p>
  
  <pre><code>$('#show_box_id').on('keyup change', function(){
    if ($('#show_box_id').val() == '' ) {
      $('.record-button').prop('disabled', true);
      $(".record-button").css("background-color", "");
    } else {
      $('.record-button').prop('disabled', false);
      $(".record-button").css("background-color", "#008C00");
    }
  });
  </code></pre>
  
  <p>The problem is that the jQuery only works on the first object created in the do/end block (so if I select something from a dropdown that's not in the first object, nothing happens), and if I select something from the dropdown in the first object, then the jQuery runs on all of them. </p>
  
  <p>How can I make it so that the jQuery code works on each object created individually with no effect on the others?</p>