Wrong input field is removed by button click
<p>I'm having an issue with some jQuery code I've written.</p>

<p>It seems that the input field on <strong>Page 2</strong> is being deleted by a button meant to remove input fields on <strong>Page 1</strong>. How can I go about sorting this out? Here is <a href="http://jsfiddle.net/psL2s/" rel="nofollow">my code</a> on jsFiddle - try adding new input fields on <strong>Page 2</strong> and then using the remove button on <strong>Page 1</strong>. Funnily enough it seems to not work the other way around. Here is my code:</p>

<pre><code>$(document).ready(function () {
    $('#add_roomFac').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($('#search_fac'));
    });

    $('#remove_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        if ($objs.size() &gt; 1) {
            $objs.last().remove();
        }
    });

    $('#addFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'request_roomFac' + n).attr('id', 'research_roomFac' + n);
        $obj.appendTo($('#request_fac'));
    });
    $('#removeFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        if ($objs.size() &gt; 1) {
            $objs.last().remove();
        }
    });
});
</code></pre>
