Laravel Скрыть выбранное значение в нескольких раскрывающихся списках

Question

У меня есть таблица поставщиков, и я получаю все данные, а затем передаю их на мой взгляд.В одном из моих модулей у меня есть 3 выпадающих списка всех поставщиков.Я хочу скрыть выбранное значение в другом раскрывающемся списке

Пример:

 1) First dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2
    > supplier 3

Когда я выбираю поставщика 1 в первом раскрывающемся списке, он не будет отображаться в оставшемся раскрывающемся списке.

Вид

@extends('layouts.app')

@section('content') 
    <?php $counter=3;?>
    @for($x = 1; $x<=$counter;$x++)
        <select id="supplier{{$x}}">

        @foreach($data as $row)
            <option value="{{$row->supplier_name}}">{{$row->supplier_name}}</option>
        @endforeach
        </select>
    @endfor

<script type="text/javascript">
        var $supplier1 = $("select[id='supplier1']");
        var $supplier2 = $("select[id='supplier2']");
        var $supplier3 = $("select[id='supplier3']");
        $supplier1.change(function() {
            $supplier2.find('option').prop("disabled", false);
            $supplier3.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier3.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
        $supplier2.change(function() {
            $supplier1.find('option').prop("disabled", false);
            $supplier3.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier3.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
        $supplier3.change(function() {
            $supplier1.find('option').prop("disabled", false);
            $supplier2.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
    </script>
@endsection

Вопрос: Как скрыть выбранное значение в раскрывающемся списке?

Обновлено:

Я обновил свой код, теперь он может быть отключен, когда он уже выбран, но есть проблема.Если я выбрал какое-либо раскрывающееся меню

Сценарий:

1) First dropdown
    > supplier 1
    > Selected supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2
    > supplier 3

Во втором и третьем раскрывающихся списках вы не можете выбрать поставщика 2, но когда я выбрал другое значение во втором или третьем раскрывающемся спискетеперь он может выбрать поставщика 2.

Сценарий:

1) First dropdown
    > supplier 1
    > Selected supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > Selected supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2(Can now select)
    > supplier 3

Вопрос: Как отключить первое и второе выбранное значение в раскрывающемся списке?