Пытаясь удалить класс, вы зачем-то указываете точку в начале его имени.
Непонятно, зачем нужны отдельные классы для каждого типа input'ов. Достаточно одного общего:
#exampleModal {
.form-group {
display: none;
&.active {
display: block;
}
}
}
Закрытие диалога может происходить не только по нажатию на кнопки в футере и хедере, а ещё и по нажатию на оверлей - этот случай вы не обрабатываете. Обработчик закрытия вы назначаете при каждом открытии диалога, т.е., открыли диалог 10 раз - у кнопки будет 10 обработчиков.
Вместо того, чтобы ловить клики где бы то ни было, следует подписаться на событие закрытия диалога:
$('#exampleModal').on({
'show.bs.modal'(e) {
const recipient = e.relatedTarget.dataset.whatever;
$('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
$(`.${recipient}`, this).addClass('active');
},
'hide.bs.modal'() {
$('.form-group.active', this).removeClass('active');
},
});
Или, другой вариант - при открытии диалога скрывать все input'ы перед показом нужных:
$('#exampleModal').on('show.bs.modal', function(e) {
const recipient = e.relatedTarget.dataset.whatever;
$('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
$('.form-group', this).removeClass('active').filter(`.${recipient}`).addClass('active');
});
Косяк, не относящийся к проблеме, но упомянуть стоит - одинаковые id у input'ов. Во-первых, id должны быть уникальны, в этом как бы и есть их смысл. Во-вторых, при одинаковых id клик по любому label'у вместо соответствующего ему input'а устанавливает фокус на первый с таким id.
Исправленный вариант можно глянуть
здесь.
