Как отключить выбранные параметры из одного поля выбора в другие поля выбора?

Question

Я создаю страницу задач, где пользователь назначает сотрудникам различные задачи.

Правила таковы:
(1) Есть более одного сотрудника назначенный одной задаче
(2) один сотрудник не может иметь две задачи

Для задач имеется только два местоположения: (1) Главный этаж и (2) Крыша

---

Вот что я сделал:

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

---

Проблемы, с которыми я столкнулся:

(1) Мои поля выбора имеют несколько типов, поэтому, когда я выбираю много имен в одном поле it не будет отключать эти имена в других полях выбора. Будет отключено только одно имя. (ПРИМЕЧАНИЕ: текст будет КРАСНЫМ, если он отключен)

отключено только одно значение

(2) Даже если выбранные значения После успешного отображения в таблице выбранные значения из других полей выбора также будут отображаться . Например, здесь сотрудники, выбранные в задаче «Швабра», также будут отображаться в задаче «Метла». Как я могу предотвратить это? Поскольку эти имена уже должны быть отключены, чтобы их нельзя было выбрать снова.

ненужные множественные значения

ПРИМЕЧАНИЕ. Кнопки Добавить имя и Удалить имя единственные кнопки, которые еще работают Кроме того, в будущем будет добавлено несколько полей выбора.

CSS:

  <style>
    form{
        margin: 20px 0;
    }

    .add-task
    {
        padding: 5px;
    }

    form input, button{
        padding: 5px;
    }
    table{
        width: 80%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }

    /*ADD NEW TASK MODAL*/
    .modalAddNewTask
{       
        color: #636363;
        margin-top:3%;
        /*width: 2000px;*/
}

.modalAddNewTask .modal-content
    {
        padding: 30px;
        border-radius: 5px;
        border: none;
        /*color:black;*/
    }

    .modalAddNewTask .modal-content label {
        color:black;
        font-weight: bold;
    }

    .modalAddNewTask .modal-header {
        border-bottom: none;   
        position: relative;
        justify-content: center;
    }

    .modalAddNewTask .modal-header .modal-title{
        /*color:#333333;*/
        color:black;
        /*font-weight: bold;*/
    }

    .modalAddNewTask h4  {
        text-align: center;
        font-size: 26px;
        margin: 30px 0 -15px;
    }

    .modalAddNewTask .form-control{
        color: black;
    }

    .modalAddNewTask .form-control:focus {
        border-color: black;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .modalAddNewTask .form-control, .modalAddNewTask .btn {
        min-height: 40px;
        border-radius: 3px; 
    }

    .modalAddNewTask .close 
    {
         position: absolute;
        top: 6px;
        right: 7px;
        font-size:40px;
    }

    .modalAddNewTask .modal-footer {
        background: #ecf0f1;
        border-color: #dee4e7;
        text-align: center;
        justify-content: center;
        /*margin: 0 -20px -20px;*/
        border-radius: 5px;
        font-size: 13px;
    }

    .modalAddNewTask .avatar {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: -70px;
        width: 95px;
        height: 95px;
        border-radius: 50%;
        z-index: 9;
        /*background: #333333;*/
        background:black;
        /*background: #cc0000;*/
        padding: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .modalAddNewTask .avatar img {
        width: 100%;
    }

    .modalAddNewTask .addTaskButton
        {
            color:black;
                        /*float:right;*/
                        display:inline-block;
                        vertical-align:middle;
                        border:1px solid black;
                        margin-right:0;
        }

        .modalAddNewTask .addTaskButton:hover
        {
            color:white;
            background-color:red;
            border:1px solid red;

        }

        .add-btn-dark
            {
                color:black;
                /*float:right;*/
                display:inline-block;
                vertical-align:middle;
                border:1px solid black;
                margin-right:0;

            }

            .add-btn-dark i, .add-btn-dark span
            {
                display:inline-block;
                vertical-align:middle;
            }

            .add-btn-dark:hover
            {
                cursor:pointer !important;
                color:white;
                background-color:black;
            }

            .add-btn-dark:focus
            {
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }

            .selectTesting option:disabled {
    /*color: red;
    background-color:#d4d9dd;
    text-decoration: line-through;*/
    /*color:#cc0000;*/
    opacity:0.8;
    color:red;
    background-color:#f2f2f2;

}

.selectTesting option:enabled {
    color: black;
    font-weight: 500;
}

.selectTesting{
    color: black;
    font-weight: 500;
    font-size:15px;
    display: inline-block;
    vertical-align: middle;
}

.selectTesting option:first-child:hidden {
    color: red;
    font-weight: 500;
    font-size:15px;
}

</style>

JSFIDDLE: https://jsfiddle.net/akpoLwt9/