Jquery - Jquery 2 dropdown lists, remove 1st selected option from 2nd list

Question

I'm using this code to allow me to select an entry from dropdown 1 and the same entry is removed from dropdown 2.

$("#BoxName").change(function(){
    var selectedItem = $(this).val();   
    var nextDropdown = $(this).parent("td").next("td").find("select.BoxComparisonClass");

    $(nextDropdown).find("option").show();
    $(nextDropdown).find("option:[value="+selectedItem+"]" ).hide();
})

This can be seen working HERE : http://jsfiddle.net/8kvesskv/5/

This works fine in Chrome & Firefox but not in Internet Explorer & Safari.

Any way I can get this to work across all four browsers ??

If not is there another way to do this ?

Thanks

** UPDATE ** This seems to work in IE. Not hiding it but disabling, which for me should work.

$("#BoxName").change(function () {
    var selectedItem = $(this).val();
    var nextDropdown = $(this).parent("td").next("td").find("select.BoxComparisonClass");

    $(nextDropdown).find("option").attr('disabled', false);
    $(nextDropdown).find("option:[value=" + selectedItem + "]").attr('disabled', true);

})

Only problem, is when the row is duplicated the disabled value is also duplicated. How do I duplicate the row but have all option in the new row available ?

UPDATE

Adding the following to my code seems to work :

$newRow.find('*').andSelf().removeAttr('id').removeAttr('disabled');

Answer 1

Disabling the options worked, instead of hiding them.

$("#BoxName").change(function () {
    var selectedItem = $(this).val();
    var nextDropdown = $(this).parent("td").next("td").find("select.BoxComparisonClass");

    $(nextDropdown).find("option").attr('disabled', false);
    $(nextDropdown).find("option:[value=" + selectedItem + "]").attr('disabled', true);

})