MarvinJan

Добрый день. Логика вашего скрипта работает не так как вы описали. Клон появляется сразу после загрузки страницы и клонированная кнопка не имеет на себе никаких событий. В любом случае, не советую вам исправлять эту ошибку, а лучше поменять подход в целом - при скролле менять стиль основного хедера, а не плодить клонов.

Если же так нужен клон, то даже исправив логику скрипта, вам каждый раз нужно будет инициировать нужный функционал на клон-кнопку, так как клонов будет много (и их надо будет удалять).

Для этого достаточно указать высоту блоку button_1, которой хватит для увеличенного блока с текстом.

Ваш код работает, но его можно слегка улучшить,

if(fas.classList.contains("fa-plus-circle")){
      fas.classList.remove("fa-plus-circle");
    }
    else{
      fas.classList.add("fa-plus-circle");
    }

вот это, раз уж вы используете toggle в коде, можно поменять на fas.classList.toggle("fa-plus-circle");

Далее,

var acc = document.getElementsByClassName("event-accordion-item");

Можно записать как

var acc = document.querySelectorAll(".event-accordion-item");

И вместо объявления i и использования for i сделать так

acc.forEach( function(acc) {
// Функционал
})

Можно сделать также и при использовании getElementsByClassName, но в таком случае нужно будет acc преобразовать в массив, при помощи Array.from( acc ) . Все потому, что getElementsByClassName возвращает HTMLcollection, у которой нет родного метода forEach, а querySelectorAll вернет NodeList, у которого метод forEach есть.

Мой вариант итогового кода

var acc = document.querySelectorAll(".event-accordion-item");
 
acc.forEach( function(acc) {

  acc.addEventListener("click", function() {

    this.classList.toggle("active");
    var fas = this.querySelector('.eventAccordion-icon');
    fas.classList.toggle("fa-plus-circle")
    fas.classList.toggle("fa-minus-circle");
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
});

Изначальный код вызывает некоторые вопросы конечно, тем не менее, так должно работать - https://codepen.io/marvinjan/pen/RzYBMm .

Изменения которые внес закомментированы между TOSTER CODE и TOSTER CODE END.