Hide selected value dynamically in select option (Performance issue)

Basically what I'm looking for is how to enhance my current code which is the ability to hide options from the dropdown of selected items. The below code is working when user selects the option it will hide the selected value in all the dropdown. But I facing one issue which is when the dropdox box has more than 100, it will cause the lagging issue when the user selects the option value.

$( ".firstname").on('change',function() {

   $('.firstname option').prop('disabled',false);//enable all options //n
            $('.firstname option').show();//show all options //n
            $('.firstname option:selected').each(function(index){// disable and hide all of the current selected values from other select boxes //1  to select boxes n
                let value = $(this).val();
                if(value !== '-1'){
                    $('.firstname option[value='+value+']').prop('disabled',true);//disable all with same value //select boxes n
                    $('.firstname option[value='+value+']').hide();//hide them //select boxes n
                    $(this).prop('disabled',false);//re-enable the current one //1
                    $(this).show();//and show it //1
                    $(this).prop('selected',true);//just to be sure re-select the option afterwards //1
                }
            });
});