Arman Hovhannisyan

Ну чтобы было проще сначала добавь всем кнопкам какой нибудь одинаковый класс типа show далее находим их всех с помощю querySelectorAll() в массив
И так же всем скрытым div к примеру класс hidden

allShowButtons = document.querySelectorAll(.show);
allHiddenForm = document.querySelectorAll(.hidden);
//потом цыклом прикрепляем всем функцию для показа при клике
for(let i =0;i<allShowButtons.length;i++){
      allShowButtons[i].onclick = showForm;
}
//далее  пишем функцию showForm
function showForm() {
///сначала в цыкле скрываем все form чтобы потом ниже в коде показать нужный
for(let i = 0;i<allHiddenForm.length;i++){
      allHiddenForm[i].style.display = "none";
} 
//Проверяем по отличающимуся классу кнопки, на какую кнопку нажали,
//так как в this попадает та кнопка по которой кликнули, и затем находим тот
//скрытый form на кнопку которой нажали, далее проверками получаем нужный
//скрытый div и в самом низу делаем его display блоком
if(this.classList.contains(showTelegram)){
     showDiv = document.querySelector(#telegram);}///тут нужно написать id соответствующего скрытого дива
else if(this.classList.contains(showNumber)){
     showDiv = document.querySelector(#number);
}
else{
     showDiv = document.querySelector(#whatsup);
}
  showDiv.style.display = "block";
}

//ps возможны ошибки так как пишу на быструю руку с телефона

For of просто перебирает элементы и привязывает ко всем кнопкам событие клик, и все он один раз заработал привязал событие к кнопкам и всё, и уже когда на какую то кнопку нажали вызывается анонимная функция в контексте для конкретной кнопки.
forof просто цыкл как и for и смысла он тут не меняет, и вообще можно было бы сделать более красиво с for использую event или this пример.

for(let i =0; i<keys.length; i++){
keys[i].onclick = function() {
display.textContent +=this.textContent;
  }
}

Асоциативные Массивы в js, начиная с ecmascript 2015
var arr = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);