jQuery .clone() Entire HTML Form AND All Its Values

I'm using jQuery and an $.ajax() call to post some complex HTML via POST to my database. I'm able to get the form's structure via .html(), but the user's selections are lost in the process. I thought I could use .clone() instead but I got this error:

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

// Cloning my form
var myFormHTML = $("#myForm").clone();

console.log(myFormHTML);

var inputData = {
  advancedSearchHTML: myFormHTML,
  otherParam: otherVar
};

console.log(inputData);

// JS ERROR is down here in the $.ajax() call:
$.ajax({
    type: "POST",
    url: 'serverSideScript.php',
    dataType: 'html',
    data: inputData,
    success: function (response) {
        console.log(response);
    }
});

These forms are very complex and they include over 100 <input type="hidden">'s which change according to the user's selections. I can't change the way this works. So my problem is that I have complex forms with HTML generated by the user and I need to copy both the HTML AND all its values so that it can be inserted into my database and eventually reloaded back into the DOM, perhaps months later. Any ideas?