Элемент DOM не обновлен в функции Handlers Event Handlers (SELECT/UNSELECT) ⇐ Jquery

[Anonymous]

Длительная борьба с стилизацией тегов select2 (действительный/недействительный), поскольку после отмены выбора тега (событие select2:unselect) состояние элемента DOM (выбранного с помощью jQuery) не отражается в функции обработчика.
Контекст:
У меня есть поле select2 в моей форме, которое не имеет опций, доступных в раскрывающемся списке, поскольку ввод служит для создания новых объектов с тегами select2: true параметр.
При выборе тега ajax выполняется запрос GET, чтобы проверить, существует ли такой объект. Если это так, то стиль тега указывает на его недопустимое состояние. Он хорошо работает при добавлении новых тегов. Однако, если я отменяю выбор даже одного тега, остальные «недействительные» теги восстанавливаются до значений по умолчанию, и все стили сбрасываются.
Во время отладки я обнаружил, что при срабатывании обработчика select2:unselect (тег уже не выбран и удален из инспектора DOM в браузер) родительский контейнер ссылается на дочерние элементы, параметры которых не актуальны в соответствии с DOM (console.log() печатает дочерние элементы, имеющие класс, который фактически не назначен в тот момент, но был назначен до события select2: unselect сработало).
let invalidTags = new Set();

function validateCustomTag() {
var tags = $("#serials-form").find("li.select2-selection__choice");

tags.each(function () {
const tag = $(this); // Get the current tag element
const serialNumber = tag.attr("title");

// Proceed with AJAX validation
$.ajax({
type: "GET",
url: SERIAL_NUMBER_VALIDATION_URL,
data: { serial_number: serialNumber },
dataType: "json",
success: function (data) {
const response = data.response;

if (!response.valid) {
// Add the invalid serial number to the Set
invalidTags.add(serialNumber);

// Append error message
const errorElement = `[*]${response.error}`;
$("#snAjaxErrors").removeClass("d-none");
$("#snAjaxErrors").append(errorElement);

}
},
});
});
}

function applyInvalidStyles() {
invalidTags.forEach((sn) => {
const select2FieldContainer = $("#serials-form")
let tag = select2FieldContainer.find(`li[title=${sn}]`)
tag.addClass("bg-danger bg-opacity-50 text-light");
});
}

$(document).ready(function () {
$("#id_serial_numbers").on("select2:select", function () {
validateCustomTag();
applyInvalidStyles();
});

$("#id_serial_numbers").on("select2:unselect", function () {
// Reapply invalid styles after any redraw
applyInvalidStyles();
});
)};


Подробнее здесь: https://stackoverflow.com/questions/793 ... t-function