title: jQuery form validate and submit multiple forms on the the same page gives "Uncaught SyntaxError: Invalid or unexpected token"
body: <p>I am trying to submit user details to a MailChimp list via PHP for multiple forms on the same page. </p>
  
  <p>My code is as follows: </p>
  
  <p>index.html</p>
  
  <pre><code>  &lt;form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate"&gt;
                              &lt;fieldset&gt;
  
                              &lt;div id="alert-area"&gt;&lt;/div&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email"&gt;
  
                                  &lt;input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);"&gt;
                                    &lt;div id='response'&gt;&lt;/div&gt;
  
                              &lt;/fieldset&gt;
                           &lt;/form&gt;
     &lt;form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate"&gt;
                              &lt;fieldset&gt;
  
                              &lt;div id="alert-area"&gt;&lt;/div&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number"&gt;
  
                                  &lt;input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email"&gt;
  
                                  &lt;input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);"&gt;
                                    &lt;div id='response'&gt;&lt;/div&gt;
  
                              &lt;/fieldset&gt;
                           &lt;/form&gt;
  </code></pre>
  
  <p>send.php</p>
  
  <pre><code>&lt;?php
  $api_key = 'XXXXXXXXX';
  $list_id = 'XXXXXXXXXX';
  
   // Include the MailChimp API wrapper
   include('./inc/MailChimp.php');
   // Then call/use the class
   use \DrewM\MailChimp\MailChimp;
   $MailChimp = new MailChimp($api_key);
  
   // Submit subscriber data to MailChimp
  
   $result = $MailChimp-&gt;post("lists/$list_id/members", [
                                                   'email_address' =&gt; $_POST["email"],
                                                   'merge_fields'  =&gt; ['FNAME'=&gt;$_POST["fname"], 'LNAME'=&gt;$_POST["lname"], 'NUMBER'=&gt;$_POST["number"]],
                                                   'status'        =&gt; 'subscribed',
                                           ]);
  
   if ($MailChimp-&gt;success()) {
           // Success message
           echo "&lt;h4&gt;Thank you for your interest. &lt;/h4&gt;";
  
   } else {
           // Display error
           echo "&lt;h4&gt;Whoops! Please try again.&lt;/h4&gt;";
   }
  ?&gt;
  </code></pre>
  
  <p>Validate function</p>
  
  <pre><code>function validateForm(){
      $('form').each(function(){
          $(this).validate({
      // all fields are required
      rules: {
          fname: {
              required: true
          },
          lname: {
              required: true
          },
          email: {
              required: true,
              email: true
          },
          number: {
              required: true,
              number: true
          }
      },
      // if valid, post data via AJAX
      submitHandler: function(form){
          $.post("assets/php/send.php", {
              fname: $("#fname").val(),
              lname: $("#lname").val(),
              email: $("#email").val(),
              number: $("#number").val()
          }, function (data) {
              $('#response').html(data);
          });
      }
    })
   })
  }
  </code></pre>
  
  <p>This works fine for the first form but gives a "Uncaught SyntaxError: Invalid or unexpected token" for other forms</p>