Select value in dropdown and remove selected value in cloned dropdown boxes
<p>I have a dropdown select with some values, and a button that clones that dropdown so I can add multiple dropdowns to set values in them.Values selected in the cloned dropdowns shouldn't be available in other dropdowns, and if I change the selected value(in case user changes his mind) it should update the other dropdowns.How can I accomplish this with jquery?</p>

<pre><code>    &lt;select class="firstCallDropDown" name="contactTypes"&gt;
&lt;option value="1"&gt;Home&lt;/option&gt;
&lt;option value="2"&gt;e-mail&lt;/option&gt;
&lt;option value="3"&gt;Mobile&lt;/option&gt;
&lt;option value="4"&gt;Mobile2&lt;/option&gt;
&lt;option value="5"&gt;Work&lt;/option&gt;
&lt;/select&gt;

&lt;a href ="#" id=addContactNumber&gt;Add&lt;/a&gt;
</code></pre>

<p>the jquery:</p>

<pre><code>$("#calls_column").delegate("#addContactNumber", "click", function(event) {
            var firstDrop = $(".firstCallDropDown:first");
            var clonedDrop = firstDrop.clone();
            clonedDrop.find("option:selected").removeAttr("selected");
            clonedSip.appendTo("#numbers");
            refreshDropdowns();

        });

function refreshDropdowns(){
   var values = $("select[name='contactTypes']");

            $(values).each(function () {
                var text = $(this).children('option:selected').val();
                var options = $("option[value='" + text + "']:not(:selected)");

                $(options).each(function () {
                    $(this).remove();
                });
            });
}
</code></pre>

<p>this is what I have so far!</p>
