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

<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>