Сообщения ответа .fail() не отображаются должным образом в правильном контейнере ⇐ Jquery

[Anonymous]

Я работаю над проектом и не могу понять, почему ошибки в AJAX .fail() неправильно отображают нужные контейнеры. Кажется, я что-то напутал с индексацией?
Это моя структура HTML:

Код: Выделить всё

Yes
No






Yes
No






No
Yes


.

Это ответ в формате JSON, который я получаю (со всеми ошибками из «response.errors»):

Код: Выделить всё

{"ticket_category_id":["can't be blank"],
"seat_number":["can't be blank"],
"sell_priority":["can't be blank"],
"physical_number":["can't be blank"],
"desirability_index":["can't be blank"],
"venue_section_id":["can't be blank"],
"rotate":["can't be blank"]}

Это фрагмент JS-кода, который я придумал, но он не отображает правильные ошибки в соответствующем контейнере.

Код: Выделить всё

.fail(function (xhr, status, error) {
let statusCode = xhr.status;
if (statusCode == 422) {
let response = xhr.responseJSON;
// console.log(response);
response.all_errors.forEach(function (errorMsg) {
let errorExplanationDiv = $(
`.error-explanation:eq(${response.all_errors.indexOf(errorMsg)})`
);
errorExplanationDiv.text(errorMsg);
errorExplanationDiv.prev().addClass('has-errors');
});
Alerts.renderAlert('Something went wrong!', 'error');
} else if (statusCode == 404) {
Alerts.renderAlert('Record not found!', 'error');
} else {
Alerts.renderAlert('Something went wrong!', 'error');
}
});

Вот изображение, показывающее проблему:
[img]https://i. sstatic.net/Xi0L2Rcg.png[/img]

Исходя из моей структуры HTML, если я получаю сообщение об ошибке "sell_priority":["не может быть пустым"], мне нужно он должен отображаться в 4-м «modal__container--row», но в настоящее время он отображается в первом. Не могу найти способ правильно отобразить ошибки в соответствующих контейнерах. Помощь очень ценится!
РЕДАКТИРОВАТЬ: заголовок сообщения

Подробнее здесь: https://stackoverflow.com/questions/784 ... -container