Keeping a value consistent In jQuery on function when run on multiple items at the same time
<p>I'm writing a module that has multiple questions users can chose to answer.  Each has their own submit button that causes the data to be posted to my application, displays the results, and then removes the form.  I was able to get this piece working perfectly but if I add a button that allows the users to submit all the forms at once it submits the form data correctly but the results get appended to the last question (the items are getting the correct data).  This is the javascript/jQuery code that I'm using:</p>

<pre><code>// setup the save answer click handler
$(document).on('click', '.saveAnswer', function(event){
    event.preventDefault();

    // get the form
    form = $(this).closest('form');

    $.ajax({
        async:true,
        type: 'POST',
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data){
            // append the text to the bottom of the answers
            form.closest('.question').find('.answers').append('&lt;li&gt;' + data + '&lt;/li&gt;').hide().slideDown(500);

            form.slideUp(500,function(){
                form.remove();
            });
        }
    });

});

// setup the save all answer click handler
$(document).on('click', '.saveAll', function(){
    $('.saveAnswer').trigger('click');
});
</code></pre>

<p>If I change the <code>async</code> value to false then it works correctly but none of the animations work and the page seems to freeze for a second until all the answers are submitted.</p>

<p>After some debugging I found that the <code>form</code> variable gets overwritten each time the function is run.  Is there a way to prevent this from happening?</p>
