It

Всё решилось в разы банальнее чем сначала казалось. Все эти массивы с переборами абсолютно не нужны. Повесил на кнопки обработчики onclick="this.parentElement.classList.toggle('visible');" и всё. На закрытие такоё же только с parent.parent. Так что вопрос исчерпан.

А кто мешает использовать 4 разные доп класса? Каждому классу задайте нужную позицию как всплывающего так и треугольника.

Вообще интерактивные элементы под ховерам не делаются для мобильной версии или планшетов т.к. на них только тапы, без мыши, нечем наводить, а значит интерактив можно делать только до 1024 условно, а меньше или убирать интерактив вообще или переходить просто на показывание элемена по нажатию кнопки, а это обычный display: none и position: absolute по удобным координатам.

Конкретно сейчас может и не нужно, но завтра появится необходимость изменить/расширить проект и все равно нужно будет на что-то сажать.
Выберете что-то не создающее кучи левого кода и влейте туда ваши 4 страницы. Тот же modx revo, создайте 4 статические страницы просто скопировав код в поле контента и всё. Как минимум проще зайти в админку чем изменять файлы локально и лить их на хостинг.
Имхо, вопрос даже не в динамике, а в элементарном удобстве. Как ни странно тот же WP, Joomla и прочие типа простые CMS требуют на порядок больше времени (изучение) для такой банальной задачи.