How can I clone an existing div to the inside of another existing div with jQuery?

Question

So far I have...

$(document).ready(function(){

    $("#AddProductButton").click(function(){
        $("#product1").clone().appendTo("#products");
    });

With...

<div id="products">
            <div id="product" id="product1">
                <select class="product" >
                    <%foreach(KODmvc.Models.Product prod in Model.products){%>
                        <%if (prod.NumberOfCourses == 1)
                        { %>
                            <option value="-1">Choose a Product</option>
                            <option value="<%=prod.ProductID %>"><%=prod.Title%></option>
                        <%} %>
                    <%} %>

                </select>
                <select class="volume"><option value="-1">Pricing Options</option></select><p></p>
            </div>
        </div>

But it's just not working... before when I had the anchor tag as a button tag it would appear for a second (the new div with containing html) then disappear because the page would resubmit for some reason, now that it is just an anchor tag it doesn't work at all (though it is firing as I traced to a breakpoint with firebug)...

Thanks!

Answer 1

Did you notice that your product div tag has two id attributes. id="product" id="product1"? The code just doesn't find anything because the first id attribute is used which is product?