Adding A Dropdown Input Box By Clicking A Plus Button

i am trying to add a box with predefined values in it by clicking a plus button with a variable number in it to define the max addition of new boxes. Native language:

Solution 1:

You need to clone the existing select and then append those to a container, keeping a count. You can use the number of options in the original select to restrict the number of new ones. Also, importantly you have to make sure that you give a unique id to each new select you create.

Something on the lines of this:

var total;

// To auto limit based on the number of options// total = $("#nativelangdrop").find("option").length - 1;// Hard code a limit
total = 5;


$("#addBtn").on("click", function() {
    var ctr = $("#additional").find(".extra").length;
    if (ctr < total) {
        var $ddl = $("#nativelangdrop").clone();
        $ddl.attr("id", "ddl" + ctr);
        $ddl.addClass("extra");
        $("#additional").append($ddl);
    }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="nativelangdrop"><optionvalue="1">Language 1</option><optionvalue="2">Language 2</option><optionvalue="3">Language 3</option><optionvalue="4">Language 4</option></select><spanid="additional"></span><hr /><inputid="addBtn"type="button"value=" + " />