Duplicate an item when a button is clicked using jQuery

Question

I am new to jQuery and I am trying to bring up another identical drop down menu that appears every time the user clicks a button. I thought this would work, where #append is the button id and #foo is the dropdown id:

<script type="text/javascript">
    $(document).ready(function(){
        $("#append").click(function(){
            $("#foo").append($("#foo"));
        });
    });
</script>

However, instead of duplicating the original drop-down list, it makes it disappear! What am I doing wrong?

Answer 1

You want something like this:

$(document).ready(function(){
  $("#append").click(function(){
  $("#foo").parent().append($("#foo").clone().removeAttr("id"));
  });
});

.append() , , <select> ( ). , .clone(), . , , id="foo" , ..... , .

Answer 2

, clone():

$("#foo").clone().attr("id", "foo2").insertAfter("#foo");

. (, , ). . .