Duplicate the Select/Option box when user clicks a

Question

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 JS already as so:

$('#employees').append($('<option>', { value: 1, text: 'Adam' }));

But if the user wants to add another employee, I have a button they can click which should add another drop down the same as before. I am struggling to do this correctly. I have tried to just append the entire 'section of code' to JS like so:

$(function() {
    $("#addMore").click(function(e) {
        e.preventDefault();
        $("#fieldList").append("<label for='employees'>Employee</label>");
        $("#fieldList").append("<div class='select-wrapper'>");
        $("#fieldList").append("<label for='employees'>Employee</label>");
        $("#fieldList").append("<select id='employees' name='employees'>");
        $("#fieldList").append("<option>- Select Employee -</option>");
        $("#fieldList").append("</select>");
        $("#fieldList").append("</div>");
        $("#fieldList").append("</div>");

    });
});

But this results in this:

Obviously something is going wrong. The section dropdown is not interact-able. MY question then is how can I do it correctly and how can I do it better?

HTML CODE

<!-- START OF EMPLOYEE -->
<div class="field third first" id="fieldList">
<label for="employees">Employee</label>
    <div class="select-wrapper">
        <select id="employees" name="employees">
            <option value="">- Select Employee -</option>
        </select>
    </div>
</div>

<div class="field third first">
    <label for="wages">Amount Paid</label>
    <input type="text" name="wages" id="wages" value=""/>
</div>

Using template https://html5up.net/story

EDIT https://jsfiddle.net/h3by56ws/ ("error": "Shell form does not validate)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="field third first" id="fieldList">
  <label for="employees">Employee</label>
  <div id="select-wrapper" class="select-wrapper">
    <select id="employees" name="employees">
            <option value="">- Select Employee -</option>
            <option value="1"> Bob </option>
            <option value="1"> Mark </option>
            <option value="1"> Alice </option>
            <option value="1"> Jamie </option>
            <option value="1"> Kris </option>
        </select>
  </div>
</div>
<div>
  <button id="addMore">
 Add Employee
 </button>
</div>
<div class="field third first">
  <label for="wages">Amount Paid</label>
  <input type="text" name="wages" id="wages" value="" />
</div>