Prop hidden() or hide() and show() can't used in Select2 Multiple Option

I want to ask about select2. I want, when I choose the option it will be hidden from the options in the select. And also if we remove it in multiple select option, it will be showed too in the option. The cases is when I'm using prop('disabled', true), It's works. But, when I'm using prop('hidden', true), It's not hidden properly.

$(document).on("select2:select", "#multiple_one, #multiple_two", function(e) {
  updateSelections(e.params.data.id);
});


$(document).on("select2:unselect", "#multiple_one, #multiple_two", function(e) {
  updateSelectionsTwo(e.params.data.id);
});

I'm using event select2:select and select2:unselect

  function updateSelections(selectedValue) {
    // console.log(selectedValue);
    $("#multiple_one option[value='" + selectedValue + "']").prop('disabled', true)
    $("#multiple_two option[value='" + selectedValue + "']").prop('disabled', true)
    // $("#multiple_one").select2("destroy").select2();
  }

The code is using disabled property. Could I use hidden property if it's already selected? And show again if the option is unselected?

It's already done, the hidden property or etc isn't appear in select2 component. Only have disabled property. So, we combined the selector aria-disabled="true" in css.

<li class="select2-results__option" id="select2-multiple_one-result-nqh8-1" role="option" aria-disabled="true" data-select2-id="select2-multiple_one-result-nqh8-1">BIAYA BURUH</li>

With this css

.select2-results__option[aria-disabled="true"] {
    display: none;
}

Maybe it will help. Thanks.