Проблема с переводом кнопок Bootstrap в активное состояние. ⇐ Html

[Anonymous]

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




ABC


DEF


GHI





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

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');
const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');

searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));
}



Во втором варианте проблема в том, что кнопки нельзя переключать повторно. Это работает только один раз. После второго нажатия (на другую кнопку) вторая кнопка не становится активной.

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');

const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');
searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));

searchInput.addEventListener('input', () => {
buttons.forEach(btn => btn.classList.remove('active'));
}, { once: true });
}




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