title: jQueryUI Accordion with multiple forms
body: <p>I'm trying to build an accordion with several "sub-forms" in it. Upon moving to the next panel, I want to submit the form fields in the oldPanel. There can be up to nine accordion sections, and therefore up to nine separate html forms with a metric buttload of input fields in each form. </p>
  
  <p>When I click from header 1 to header 2 the very first time, it works (as scripted anyways - still having trouble getting the form's content to serialize). When I click from header 2 back to 1, form becomes an empty object. How can I submit the form in each respective panel upon the closure of that panel?</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function () {
    $("#accordionSubmit").accordion({
      collapsible: true,
      beforeActivate: function (event, ui) {
          var tbl = $('#accordionSubmit').data('table');
          var form = $(ui.oldPanel).find('form'); //.serialize();
  
          $.ajax({
              type: "POST",
              url: "ajax.php",
              data: form,
              success: function (data) {
                  $(ui.newPanel).html(data);
                  console.log(form);
  
              },
              error: function (xhr, status, error) {
                  //var err = eval("(" + xhr.responseText + ")");
                  alert("Nope");
              }
          });
      }
    });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div id="accordionSubmit" class="accordionSubmit" data-table="jto-submit"&gt;
      &lt;h3&gt;Header Name 1&lt;/h3&gt;
  
  &lt;div&gt;
      &lt;form name="form" id="a"&gt;
          &lt;input type="hidden" id="stuff" value="YAY"&gt;
          &lt;input type="hidden"&gt;
      &lt;/form&gt;Contents&lt;/div&gt;
      &lt;h3&gt;Header Name 2&lt;/h3&gt;
  
  &lt;div&gt;
      &lt;form name="form" id="b"&gt;
          &lt;input type="hidden" id="stuff1" value="YAY1"&gt;
          &lt;input type="hidden"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>