Question

How can I duplicate the #DvRefer element with its contents when the user clicks on the #Duplicate button?

<div id='DvRefer'>
    <div style="float: right; margin-right: 5px; margin-top: 8px;">name:</div>
    <select id="LstRefer" runat="server" style="margin-top: 8px; margin-right: 14px;float: right; margin-left: 8px; width: 205px;">
    </select>
</div>
<div style="clear:both"></div>
<div style="text-align: left">
    <input id="Duplicate" type="button" runat="server" value="Duplicate" class="buttons" />
</div>                                     

Answer 1

Try this:

var cloneCount = 0;
$("#Duplicate").click(function() {
    $("#DvRefer").clone()
        .attr("id", "DvRefer_Clone" + cloneCount)
        .insertAfter("#DvRefer");
    $("#LstRefer", "#DvRefer_Clone" + cloneCount)
        .attr("id", "LstRefer_Clone" + cloneCount);
    cloneCount++;
});

You can see I’ve also changed the id of the cloned element to avoid having duplicate ids, which is invalid, and will cause you problems.

Update

Fixed to account for multiple cloned divs. If you don’t want to use a global variable, you could instead use a hidden input element to store the counter.