Duplicate The Select/option Box When User Clicks Add More

I have a simple online form I am trying to make. One of the components of the form is a drop down menu (select/option thing) showing the different employees. I have populated it in

Solution 1:

Take a look at this fiddle. You only need a few lines of jQuery to do this.

Keep in mind that you shouldn't have multiple DOM elements with the same ID, so you'd want to modify this.

If your HTML looks like the following, then you only need this Javascript:

$(function() {
    $("#addMore").click(function(e) {
        var newSelect = $("#employees").clone();
        newSelect.val("");
        $("#select-wrapper").append(newSelect);
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divclass="field third first"id="fieldList"><labelfor="employees">Employee</label><divid="select-wrapper"class="select-wrapper"><selectid="employees"name="employees"><optionvalue="">- Select Employee -</option><optionvalue="1"> Bob </option><optionvalue="1"> Mark </option><optionvalue="1"> Alice </option><optionvalue="1"> Jamie </option><optionvalue="1"> Kris </option></select></div></div><div><buttonid="addMore">
 Add Employee
 </button></div><divclass="field third first"><labelfor="wages">Amount Paid</label><inputtype="text"name="wages"id="wages"value="" /></div>