Using WP Ajax and jQuery to process multiple forms on the same page?

Question

I'm using the following to make ajax calls:

wp_enqueue_script( 'my-ajax-request', TAF_PLUGIN_URL . 'js/ajaxcf.js', array( 'jquery' ) ); 
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'postid' => get_the_ID(),  ) );\

And in my javascript file i have a fairly simple code snippet:

jQuery(document).ready(function($) {
    jQuery('.submit').click(function(){
        var str = $("#ajaxForms").serialize();
        var data = {
            action: 'myajax-submit',
            serialize: str,
        };

        jQuery.post(MyAjax.ajaxurl, data,  function(response) {
            alert(response);
        });
        return false;   
    });
});

And for my html i have:

<form id="ajaxForms">
    <label for="fname">First Name:</label>
    <input id="postID" name="postID" value="First Name" type="text"  />
    <input id="submit_button" class="submit" value="Send" type="button" />
</form>

Everything seems to be working smoothly however i would like to process multiple forms on the same page, say for example the homepage has five posts, each of these posts will have my form (html code above).

I'm getting conflicts when more than one form is displayed, this is due to the jquery, for example the click function has a class of .submit or the .serialize() has the same ID as the rest.

How would i use the jQuery with unique identifiers for each form so conflicts won't happen?

I hope i made this clear.

Kind Regards

Answer 1

This isn't specific to WordPress, but I'll answer it anyway :)

Don't target the form by id, instead target it by its relationship to the button that was clicked. change:

var str = $("#ajaxForms").serialize();

to:

var str = $(this).parent().serialize();