How to remove an option from multiple select drop down if an option is already displayed and selected?

See more:

jQuery

What I want to do is , if in the multi select dropdown an option is selected it will be displayed in dropdown as it is a multi select drop down now if the option is selected and displayed it should be removed from the drop down list as it is already selected and once the selected option is removed and unselected it should be appended back again in the list.

What I have tried:

$('#ddlProductId').on('select2:select', function (e) {
        debugger
        var id = $("#ddlProductId").val().toString();
        var names = $("#ddlProductId").text().toString();
        var values = id.split(",");

/*        $("#ddlProductId option[value="+values[0]+"]").remove();*/
        var matchFloat = String(values).match(/[+-]?\d+(\.\d+)?/g);
        if (id == null || id == "" || id == undefined) {
            $("#PriceReferenceId").empty();
        }
        else {
            if (parseInt($("#BeatId").val()) > 0) {
                var action_list = document.getElementById("ddlProductId");
                var action_list2 = document.getElementById("ddlProductId");

                // Get selected items.
                var is_selected = [];
                for (var i = 0; i < action_list.options.length; ++i) {
                    is_selected[i] = action_list.options[i].selected;
                                 }
              
                 //Remove selected items.
                i = action_list.options.length;
                while (i--) {
                    debugger
                    if (is_selected[i] == true) {
                        action_list.remove(i);
                    }
                    
                }

                
                
                GetAllPriceReferenceId(id, "PriceReferenceId");
            }