Question

I have the following HTML:

<div id="addFieldUI" style="display: none">
<div>
    Field Name:
    <input type="text" />
</div>
<div>
    Field Value
</div>
<div>
    Data Type:
    <select>
        <option>Price</option>
    </select>
</div>

I would like to reuse the HTML in at least two other jQuery modals. If I use $('#otherElem').html($('#addFieldUI').html()) 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?

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.

Answer 1

Something like this, perhaps:

var counter = 0;
$('#otherElem').html(
    $('#addFieldUI')
        .clone()
        .attr('id', 'addFieldUI-' + counter++)
        .html()
);