Question

I have a drop down called roomfac1 on my form and I would like roomfac2, roomfac3… (duplicate dropdowns) to be added when the user clicks on the Add button. How do I accomplish this using jQuery? In addition to this, I would also like the user to dynamically remove the newly created inputs as well.

I’ve uploaded my code here: http://jsfiddle.net/ecRXP/2/

<select name="roomFac1" id="roomFac1">
  <option selected="selected">Any</option>
</select>
<input type="button" value="Add" class="pmbtn" id="addFac"/>
<input type="button" value="Remove" class="pmbtn" id="removeFac"/>

Answer 1

$(document).ready(function(){
    $('#addFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac'+n).attr('id', 'roomFac'+n);
        $obj.appendTo($('body'));
    });
    $('#removeFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        if($objs.size() > 1){
           $objs.last().remove();
        }
    });
});

and here is the fiddle: http://jsfiddle.net/kfm5b/2/