This way
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID = "ddlFruits" runat="server">
<asp:ListItem Text="Please Select" Value = "0" />
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Orange" Value="4" />
</asp:DropDownList>
<br />
<br />
<input type="button" id="btnClone" value="Clone" />
<hr />
<div id = "container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
$("#btnClone").bind("click", function () {
var index = $("#container select").length + 1;
//Clone the DropDownList
var ddl = $("[id$=ddlFruits]").clone();
//Set the ID and Name
ddl.attr("id", "ddlFruits_" + index);
ddl.attr("name", "ddlFruits_" + index);
//[OPTIONAL] Copy the selected value
var selectedValue = $("[id$=ddlFruits] option:selected").val();
ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
//Append to the DIV.
$("#container").append(ddl);
$("#container").append("<br /><br />");
});
});
</script>
</form>
</body>
</html>