Открытие и закрытие формы

Есть список, а у каждого списка есть кнопка при нажатии которой открывается форма с редактированием элемента этого списка. Изначально форма с редактирование скрыта. У меня получилось сделать чтобы при нажатии на кнопку форма открывалась и закрывалась при нажатии на esc или при нажатии сохранить, но у меня не получается сделать так чтобы форма скрывалась при повторном нажатии. Подскажите как это сделать? Используется метод replaceChild. и если можно то объяснить решение.

  const tripComponent = new ElementListView(trip);
  const tripEditComponent = new EditFormView(trip);

  const replaceCardToForm = () => {
    tripListElement.replaceChild(tripEditComponent.getElement(), tripComponent.getElement());
  };

  const replaceFormToCard = () => {
    tripListElement.replaceChild(tripComponent.getElement(), tripEditComponent.getElement());
  };

  const onEscKeyDown = (evt) => {
    if (evt.key === 'Escape' || evt.key === 'Esc') {
      evt.preventDefault();
      replaceFormToCard();
      document.removeEventListener('keydown', onEscKeyDown);
    }
  };

  tripComponent.getElement().querySelector('.event__rollup-btn').addEventListener('click', (evt) => {
    evt.preventDefault();
    replaceCardToForm();
    document.addEventListener('keydown', onEscKeyDown);
  });

  tripEditComponent.getElement().addEventListener('submit', (evt) => {
    evt.preventDefault();
    replaceFormToCard();
    document.removeEventListener('keydown', onEscKeyDown);
  });

  render(tripListElement, tripComponent.getElement(), RenderPosition.BEFOREEND);
};```