title: jQuery - ensure IDs are unique in inserted markup
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;div id="section"&gt;
      &lt;input type="text" id="myInput"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am attempting to insert the html contents of this markup after itself, using the jQuery <code>html()</code> and <code>after()</code> methods:</p>
  
  <pre><code>var newSection = $('#section').html();
  $('#section').after(newSection);
  </code></pre>
  
  <p>So I'm ending up with something like this:</p>
  
  <pre><code>&lt;div id="section"&gt;
      &lt;input type="text" id="myInput"&gt;
  &lt;/div&gt;
  &lt;input type="text" id="myInput"&gt;
  </code></pre>
  
  <p>Is there a way I can ensure the IDs of my inputs are unique? I would prefer something like "myInput2" for the input that has been inserted. Thank you.</p>