Подстановка в форму из DOM , элемента с id

Краткое описание задачи и проблемы с которой столкнулся.

Задача. На странице сетка услуг. При нажатии на кнопку (закзать услугу) открывается модальное окно (форма заявки): Задача получить письмо с заявкой на услугу и узнать какая именно из 4 кнопок на странице была нажата (то бишь выбранная услуга)

Решение. 1) Каждая карточка услуги это div (в составе которого img, p, button). 2) В форме есть скрытое поле, подумал почему бы не присвоить в ручную id кнопки (Пример в приложенном изображении: холодное остекление), и присвоить всем 4ем кнопкам один класс. 3) Написать скрипт в котором функция находит id конкретно нажатой кнопки и подставляет его на основе класса в скрытое поле формы.

Написал вот такое скрипт, разместил его в footer.php, так как он не будет работать в header, по причине нечего показывать, еще страница не загружена:

<script lang="javascript">
	(function () {
		const buttonClassName = 'shop';
		const ids = ['field_4b68799'];

		for (const buttn of document.getElementsByClassName('shop')) {
			buttn.addEventListener("click", setTextForEmail);
		}

		const findForm = () => new Promise(resolve => {
			const intrv = setInterval(() => {
				ids.forEach(id => {
					const fullId = 'form-field-' + id;
					if (document.getElementById(fullId) != null) {
						clearInterval(intrv);
						resolve();
					}
				});
			}, 100);
		});

		function setTextForEmail() {
			findForm().then(() => {
				ids.forEach(id => {
					const fullId = 'form-field-' + id;
					document.getElementById(fullId).value = document.getElementsByClassName(buttonClassName)[0].getElementsByTagName('a')[0].getAttribute('text');
				});
			});
		}
	})();
</script>

Проблема!! Не важно какую из четырех кнопок я нажму, получаю id первой. Соответственно не могу понять, почему он подставляет мне значение из первого элемента dom если id индивидуальный. Где то в коде у меня косяк. Мужики кто может поправить в коде что я не то сделал.