Two identical modals, but one does not work. Why?

I am sorry if this is going to be a bit long. I have two ul elements on my page that contain a list that is made to look like a subway map.

For the first ul, I made a class inside the li elements, which fetch json data that pops up in a modal. This modal WORKS!

The problem is my SECOND modal. Here I have a simple button, and when I click that button I want a modal to pop up, containing my second ul element. The problem is that I can´t get THIS modal to work. I renamed everything, both in the html, css and script, and I am going crazy because I can´t find the error. I need this project finished tonight, so I am getting more and more frustrated about it

My test page is here: http://handig.dk/EXAM2019/index.html The second section contains my working modal. The third contains the non-working modal.

The html

`<div class="map">

            <ul>
                        <li id="getTime" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime2" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime3" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime4" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime5" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime6" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime7" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime8" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime9" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime10" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime11" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime12" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>

             </ul>
                    <h2>Text</h2>

            <div id="modal-1" class="modal">

                <div class="modal-inner">
                    <div id="modal-body">
                      </div>
                  <a class="js-close-modal">&times;</a>
                  <div class="modal-content">

                <p class="modal-headline">Text</p>

                      </div>

                  </div><!-- .modal-content -->
                </div><!-- .modal-inner -->
              </div><!-- .modal -->

<!-- SECOND MODAL (NOT WORKING) -->

<div class="trains">
    <button class="js-modal2" data-modal="modal-2">Tjek driften</button>


            <div id="modal-2" class="modal2">

                <div class="modal-inner2">
                    <div id="modal-body2">
                      </div>
                  <a class="js-close-modal2">&times;</a>
                  <div class="modal-content2">

                <p class="modal-headline">Drift</p>
               <ul>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>

             </ul>

                      </div>

                  </div><!-- .modal-content2 -->
                </div><!-- .modal-inner2 -->`

CSS for the WORKING modal

.modal-body {
  overflow: hidden;
  position: relative;
}

#modal-body {
     background:#900;
}
.modal-body:before {
  position: fixed;
  display: block;
  content: '';
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.modal-body:before {
  -webkit-animation: fadeIn 320ms ease;
  animation: fadeIn 320ms ease;
  transition: opacity ease 320ms;
}

.modal-body.modal-fadeOut:before {
  opacity: 0;
}


.modal {
  transition: all ease 0.01s;
  display: block;
  opacity: 0;
  height: 0;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.modal-visible {
  opacity: 1;
  height: auto;
  bottom: 0;
}


.modal-inner {
  transition: all ease 320ms;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  background: #fff;
  opacity: 0;
  margin: 40px 0;
  border-radius: 4px;
  box-shadow: 0 30px 18px -20px #020202;
}

.modal-inner.modal-reveal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.js-close-modal {
  transition: color 320ms ease;
  color: #9e9e9e;
  opacity: 0.75;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.js-close-modal:hover {
  color: #000;
}

.modal-headline {
    font-size: 1.5em;
    font-weight: 700;
}

.modal-content {
    letter-spacing: 1px;
}
.modal-content2 {
    letter-spacing: 1px;
}

CSS for modal that does NOT work

.modal-body2 {
  overflow: hidden;
  position: relative;
}

#modal-body2 {
     background:#900;
}
.modal-body2:before {
  position: fixed;
  display: block;
  content: '';
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.modal-body2:before {
  -webkit-animation: fadeIn 320ms ease;
  animation: fadeIn 320ms ease;
  transition: opacity ease 320ms;
}

.modal-body2.modal2-fadeOut:before {
  opacity: 0;
}


.modal2 {
  transition: all ease 0.01s;
  display: block;
  opacity: 0;
  height: 0;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal2.modal2-visible {
  opacity: 1;
  height: auto;
  bottom: 0;
}


.modal-inner2 {
  transition: all ease 320ms;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  background: #fff;
  opacity: 0;
  margin: 40px 0;
  border-radius: 4px;
  box-shadow: 0 30px 18px -20px #020202;
}

.modal-inner2.modal2-reveal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.js-close-modal2 {
  transition: color 320ms ease;
  color: #9e9e9e;
  opacity: 0.75;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.js-close-modal2:hover {
  color: #000;
}

Script for modal that WORKS

const modal = () => {
'use strict';
class Modal {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal');
    this.close = document.querySelectorAll('.js-close-modal');
    this.modals = document.querySelectorAll('.modal');
    this.modalInners = document.querySelectorAll('.modal-inner');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal.hideModal, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body')) {
      Modal.hideModal();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal.hideModal();
    }
  }

  static hideModal() {
    let modalOpen = document.querySelector('.modal.modal-visible');

    modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal');
    document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false);
    document.body.classList.add('modal-fadeOut');
  }

  closeModal(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) {
      document.querySelector('.modal.modal-visible').classList.remove('modal-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modalID = el.currentTarget.dataset.modal;
    let modal = document.getElementById(modalID);

    document.body.classList.add('modal-body');
    modal.classList.add('modal-visible');
  }

  revealModal(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) {
      el.target.querySelector('.modal-inner').classList.add('modal-reveal');
    }
  }

  static modalBody(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) {
      document.body.classList.remove('modal-body', 'modal-fadeOut');
    }
  }}



new Modal();
};

export default modal;

Script for modal that does NOT WORK

const modal2 = () => {
'use strict';
class Modal2 {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal2');
    this.modals = document.querySelectorAll('.modal2');
    this.modalInners = document.querySelectorAll('.modal-inner2');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal2, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal2, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal2.hideModal2, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal2, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body2')) {
      Modal2.hideModal2();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal2-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal2.hideModal2();
    }
  }

  static hideModal2() {
    let modalOpen = document.querySelector('.modal2.modal2-visible');

    modalOpen.querySelector('.modal-inner2').classList.remove('modal2-reveal');
    document.querySelector('.modal-body2').addEventListener('transitionend', Modal2.modalBody2, false);
    document.body.classList.add('modal2-fadeOut');
  }

  closeModal2(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal2-reveal')) {
      document.querySelector('.modal2.modal2-visible').classList.remove('modal2-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modal2ID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modal2ID);

    document.body.classList.add('modal-body2');
    modal.classList.add('modal2-visible');
  }

  revealModal2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2-visible')) {
      el.target.querySelector('.modal-inner2').classList.add('modal2-reveal');
    }
  }

  static modalBody2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2') && !el.target.classList.contains('modal2-visible')) {
      document.body.classList.remove('modal-body2', 'modal2-fadeOut');
    }
  }}



new Modal2();
};

export default modal2;