I have multiple coupons on a page and I'm trying to get comments to work on each coupon. So for each coupon i have a comments form. Im using jQuery + Ajax to accomplish this. Here's what my code looks like.

Coupon Page

 <p>Comments:</p>
  <% form_for(@comment) do |f| %>
    <%= f.label :body %><br /><%= f.text_field :body, :size => "24"  %>
    <%= f.hidden_field :coupon_id, :value => coupon.id %>
    <%= f.submit "Save" %> 
  <% end %>

Application.js

jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})




jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#new_comment").submitWithAjax();
})

I tried changing the jQuery selector to a class

$(".new_comment").submitWithAjax();

Thinking that would work, now all the submit buttons work, however it posts only the first form on the page.

What can I change to make it so ajax submits the correct form and not the first one?