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);
    }
});

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