title: How do I reuse HTML User Interface elements?
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id="addFieldUI" style="display: none"&gt;
  &lt;div&gt;
      Field Name:
      &lt;input type="text" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      Field Value
  &lt;/div&gt;
  &lt;div&gt;
      Data Type:
      &lt;select&gt;
          &lt;option&gt;Price&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I would like to reuse the HTML in at least two other jQuery modals. If I use <code>$('#otherElem').html($('#addFieldUI').html())</code> to insert the HTML into an HTML element I have the problem of duplicate elements if I use input ids for the fields. Should I rather use input names? Should I use a 'script' code block instead of a div? How do I create reusable HTML? </p>
  
  <p>EDIT
  I am aware of jQuery data templates but in this case I just want to reuse HTML within MODAL dialogs. E.g. if I used the same form for creating and editing data.  </p>