Перестали отображаться элементы

при добавлении возможности на кнопку сворачивать и разворачивать элемент редактирования перестали отображаться все элементы которые должны рандомно генерироваться. Основная проблема происходит при добавлении renderTrip. Как сделать отображение на странице всех элементов? и как сделать работающую стрелку разворачивания и сворачивания формы редактирования.

//основной фаил main.js
import SiteMenuView from './view/site-menu.js';
import TripInfoView from './view/trip-info.js';
import TripCostView from './view/trip-cost.js';
import FiltersView from './view/filters.js';
import SortingView from './view/sorting.js';
import ListView from './view/trip-list.js';
import EditFormView from './view/edit-form.js';
import DestinationView from './view/trip-destination.js';
import ElementListView from './view/trip-element.js';
import { generateTrip } from './mock/trip.js';
import { render, RenderPosition } from './utils.js';
import SortingListView from './view/sorting-list.js';
import flatpickr from 'flatpickr';

const DESTINATIONS_COUNT = 15;

const trips = new Array(DESTINATIONS_COUNT).fill().map(generateTrip);

const siteMainElement = document.querySelector('.trip-main');
const siteHeaderElement = siteMainElement.querySelector('.trip-controls__navigation');
const siteFiltersElement = siteMainElement.querySelector('.trip-controls__filters');

const renderTrip = (tripListElement, trip) => {
  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());
  };

  tripComponent.getElement().querySelector('.event__rollup-btn').addEventListener('click', () => {
    replaceCardToForm();
  });
  tripEditComponent.getElement().querySelector('.event__header').addEventListener('submit', (evt) => {
    evt.preventDefault();
    replaceFormToCard();
  });

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

render(siteHeaderElement, new SiteMenuView(trips[0]).getElement(), RenderPosition.BEFOREEND);
render(siteMainElement, new TripInfoView(trips[0]).getElement(), RenderPosition.AFTERBEGIN);
render(siteFiltersElement, new FiltersView(trips[0]).getElement(), RenderPosition.BEFOREEND);

const siteCostElement = siteMainElement.querySelector('.trip-info');

render(siteCostElement, new TripCostView(trips[0]).getElement(), RenderPosition.BEFOREEND);

const siteMainContentElement = document.querySelector('.trip-events');

const SortingListComponent = new SortingListView();
render(siteMainContentElement, SortingListComponent.getElement(), RenderPosition.AFTERBEGIN);
render(SortingListComponent.getElement(), new SortingView(trips[0]).getElement(), RenderPosition.BEFOREEND);
render(siteMainContentElement, new ListView(trips[0]).getElement(), RenderPosition.BEFOREEND);

const siteCreateEditFormElement = siteMainContentElement.querySelector('.trip-events__item');

render(siteCreateEditFormElement, new EditFormView(trips[0]).getElement(), RenderPosition.AFTERBEGIN);
render(siteCreateEditFormElement, new ElementListView(trips[0]).getElement(), RenderPosition.BEFOREEND);

const DestinationListElement = siteMainContentElement.querySelector('.event__section--destination');

render(DestinationListElement, new DestinationView(trips[0]).getElement(), RenderPosition.BEFOREEND);

for (let i = 0; i < DESTINATIONS_COUNT; i++) {
  renderTrip(siteCreateEditFormElement, new ElementListView(trips[i]).getElement(), RenderPosition.BEFOREEND);
}

flatpickr('#event-start-time-1', {
  enableTime: true,
  dateFormat: 'd/m/y H:i',
  defaultDate: Date(),
});

flatpickr('#event-end-time-1', {
  enableTime: true,
  dateFormat: 'd/m/y H:i',
  defaultDate: Date(),
});
------
//фаил с герерацией рандомных данных trip.js
import dayjs from 'dayjs';
import { getRandomInteger } from '../utils.js';
import { DESCRIPTIONS, TYPES, CITIES, PICTURES } from '../const.js';
//Генерируем случайную дату +/- 7 дней
const generateDate = (duration, type = 'hour') => {

  const daysGap = getRandomInteger(-duration, duration);

  return dayjs().add(daysGap, type).toDate();
};

//Генерируем описание
const generateDescription = () => {
  const randomIndex = getRandomInteger(0, DESCRIPTIONS.length - 1);
  return DESCRIPTIONS[randomIndex];
};

//Генерируем тип транспорта
const getRandomPointType = () => {
  const randomIndex = getRandomInteger(0, TYPES.length - 1);

  return TYPES[randomIndex];
};

//Генерируем случайный город
const getRandomCity = () => {
  const randomIndex = getRandomInteger(0, CITIES.length - 1);

  return CITIES[randomIndex];
};

//Генерируем случайную картинку

const getRandomPictures = () => {
  const randomIndex = getRandomInteger(0, PICTURES.length - 1);

  return PICTURES[randomIndex];
};

//Получаем рандомную точку маршрута с полями
export const generateTrip = () => {
  const date = generateDate();
  return {
    description: generateDescription(),
    pointType: getRandomPointType(),
    city: getRandomCity(),
    timeFrom: generateDate(7),
    timeTo: generateDate(7),
    dateFirst: date,
    pictures: getRandomPictures(),
    isFavorite: Boolean(getRandomInteger(0, 1)),
    price: getRandomInteger(10, 1000),
    offers: {
      title: 'Choose meal',
      price: 180,
    },
  };
};
-----
//фаил с утилитами util.js
import dayjs from 'dayjs';

export const RenderPosition = {
  AFTERBEGIN: 'afterbegin',
  BEFOREEND: 'beforeend',
};

export const render = (container, element, place) => {
  switch (place) {
    case RenderPosition.AFTERBEGIN:
      container.prepend(element);
      break;
    case RenderPosition.BEFOREEND:
      container.append(element);
      break;
  }
};

export const createElement = (template) => {
  const newElement = document.createElement('div');
  newElement.innerHTML = template;

  return newElement.firstChild;
};

export const getRandomInteger = (a = 0, b = 1) => {
  const lower = Math.ceil(Math.min(a, b));
  const upper = Math.floor(Math.max(a, b));

  return Math.floor(lower + Math.random() * (upper - lower + 1));
};

export const humanizeTaskDateFirst = (dateFirsts) => dayjs(dateFirsts).format('D MMM');
export const humanizeTime = (time) => dayjs(time).format('hh:mm');
----
//Фаил с генерируемым местом 
import { humanizeTaskDateFirst, humanizeTime, createElement } from '../utils.js';
const createElementListTemplate = (tripEventsItem) => {

  const { pointType, city, price, timeFrom, timeTo, dateFirst, isFavorite } = tripEventsItem;

  const favoriteClassName = isFavorite
    ? 'event__favorite-btn  event__favorite-btn--active'
    : 'event__favorite-btn';

  return `<li class="trip-events__item">
    <div class="event">
      <time class="event__date" datetime="2019-03-18">${humanizeTaskDateFirst(dateFirst)}</time>
      <div class="event__type">
        <img class="event__type-icon" width="42" height="42" src="img/icons/${pointType}.png" alt="Event type icon">
      </div>
      <h3 class="event__title">${pointType} ${city}</h3>
      <div class="event__schedule">
        <p class="event__time">
          <time class="event__start-time" datetime="2019-03-18T10:30">${humanizeTime(timeFrom)}</time>
          &mdash;
          <time class="event__end-time" datetime="2019-03-18T11:00">${humanizeTime(timeTo)}</time>
        </p>
        <p class="event__duration">30M</p>
      </div>
      <p class="event__price">
        &euro;&nbsp;<span class="event__price-value">${price}</span>
      </p>
      <h4 class="visually-hidden">Offers:</h4>
      <ul class="event__selected-offers">
        <li class="event__offer">
          <span class="event__offer-title">Order Uber</span>
          &plus;&euro;&nbsp;
          <span class="event__offer-price">20</span>
        </li>
      </ul>
      <button class="${favoriteClassName}" type="button">
        <span class="visually-hidden">Add to favorite</span>
        <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
          <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
        </svg>
      </button>
      <button class="event__rollup-btn" type="button">
        <span class="visually-hidden">Open event</span>
      </button>
    </div>
  </li>`;
};

export default class ElementList {
  constructor(elementsList) {
    this._elementsList = elementsList;
    this._element = null;
  }

  getTemplate() {
    return createElementListTemplate(this._elementsList);
  }

  getElement() {
    if (!this._element) {
      this._element = createElement(this.getTemplate());
    }

    return this._element;
  }

  removeElement() {
    this._element = null;
  }
}