Javascript не может сопоставить объект с повторяющимися значениями ⇐ Html

[Anonymous]

Мне нужно стилизовать определенные элементы по идентификатору, используя данный объект.
Ключи и значения в объекте projectSkillsMap соответствуют идентификаторам в html-файле. Когда пользователь нажимает на элемент с идентификатором, указанным в ключах объекта, функция selectProject() служит для стилизации элементов с идентификаторами, указанными в массиве значений, соответствующих ключу.
Первоначальная цель — удалить класс button_click из всех элементов. кнопки и добавляйте только те, которые перечислены в объекте.

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

const projectSkillsMap = {
'project1': ['skill_2', 'skill4', 'skill5'],
'project2': ['skill1', 'skill_2', 'skill4', 'skill5', 'skill6'],
'project3': ['skill1', 'skill_2', 'skill3', 'skill4', 'skill5', 'skill6']
}

function chooseProject(key) {
// adding accet to chosen group
Object.keys(projectSkillsMap).map((i) => {
if (i == key) {
Object.entries(projectSkillsMap).map((il, value) => {
if (il == i) {
document.getElementById(value).classList.toggle('button_click')
}
})
}
})

// removing accents from other groups
Object.keys(projectSkillsMap).map((i) => {
if (i !== key) {
projectSkillsMap[`${i}`].map((el) => document.getElementById(`${el}`).classList.remove('button_click'))
}
})

Object.values(projectSkillsMap).map((el) => {
if (el !== key) {
document.getElementById(el).classList.remove('button_click')
}
})
}

Когда пользователь нажимает кнопку, функция ChooseProject() запускается с помощью одной из клавиш объекта. Проблема в том, что document.getElementById(value).classList.toggle('button_click') не работает из-за повторяющихся значений среди ключей моего объекта.
Я понял, что когда я изменил свой объект и оставил только уникальные значения для каждого ключа, код работал так, как ожидалось.
Можно ли как-нибудь заставить его работать?

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