title: jquery .html() doesn't preserve input values
body: <p>I have a button on my web page that, when clicked, does the following:</p>
  
  <ol>
  <li>Gets the contents of a "template table" by calling .html() on that table</li>
  <li>Stores the contents of the above call in a variable</li>
  <li>Does a global replace on that variable to track table row number</li>
  <li>Replaced contents are added to my "real table"</li>
  </ol>
  
  <p>Problem: Values entered by users into input fields in those table rows are not preserved. Here's the code:</p>
  
  <pre><code>function addRowToCluesTable() {
      var t = $("#template").html().replace(/{NUM}/g, stepCount);
      var r = $("#real").html();
      $("#real").html(r + "\n\n" + t);
  }
  </code></pre>
  
  <p>This all works fine EXCEPT that any input fields in the "real" table (non-template) containing values entered by users are lost and all values are returned to their default or empty state. So the flow goes like this: row is added, values entered into real table, another row added, values entered...repeat.</p>
  
  <p>How can I get jquery to preserve the user-supplied input values when dynamically adding rows? Instead of storing real table contents in a variable should I instead append template rows to the end of the real table? If so, what's the best way to do that?</p>