2 Ajax表单错误

im having some problem in my ajax forms, i cant figure out what is the problem. So basically i have in the same page 2 contact forms, where uses the same code, the only difference between them is one of them is located in the top and the other at the bottom of the page.

So the problem is when i submit one of the forms, for example the bottom, it works fine, the message of sucess or failed outputs in the same page, but when i try to test the form from the top it redirect to the action script, instead of outputting in the same page.

The strange thing is if i remove the form from the bottom it works fine the form of the top, but when i use both of them only one of them works.

Cant figure out where is the problem in the code, here it is:

JS:

 // Get the form.
    var form = $('#ajax-contact');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.

            $('#email').val('');

        })
        .fail(function(data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });

    });

HTML:

<form id="ajax-contact" method="post" action="mailer.php">

    <div id="form-messages"></div>
    <div class="emailboxContent">
        <p>Você pode cancelar a assinatura a qualquer momento.</p>
        <input type="text" class="form-control" name="email" id="email" placeholder="E-Mail">
        <div class="act">
             <input type="hidden" name="st" value="<?php if($q!=''){echo $q;}else{ echo  'Varios';}?>">
                    <input type="hidden" name="loc"  value="<?php echo $location;?>">
            <button type="submit" class="btn btn-success navbar-btn">Ativate</button>
        </div>
    </div>
</form>

Try this code, it uses class instead of ID's:

// Set up an event listener for the contact form.
$('.ajax-contact').submit(function(e) {
  // Stop the browser from submitting the form.
  e.preventDefault();
var form = $(this);
  var formMessages = $(form).find('.form-messages');
  var emailField = $(form).find('.email');
  // Serialize the form data.
  var formData = $(form).serialize();

  // Submit the form using AJAX.
  $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    })
    .done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text(response);

      // Clear the form.

      $(emailField).val('');

    })
    .fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
      }
    });

});

<form class="ajax-contact" method="post" action="mailer.php">

  <div class="form-messages"></div>
  <div class="emailboxContent">
    <p>Você pode cancelar a assinatura a qualquer momento.</p>
    <input type="text" class="form-control" name="email" class="email" placeholder="E-Mail">
    <div class="act">
      <input type="hidden" name="st" value="<?php if($q!=''){echo $q;}else{ echo  'Varios';}?>">
      <input type="hidden" name="loc" value="<?php echo $location;?>">
      <button type="submit" class="btn btn-success navbar-btn">Ativate</button>
    </div>
  </div>
</form>

</div>