Why is my modal not working?

I am beginning to go crazy.
I have a page that contains two modals. One has list items that contain links to json data.
The other only contains the lists themselves without links.

The first modal works, but for some reason the second does not.
I have renamed the ID.
I have renamed the class.
I have renamed everything in CSS.
Yet, NOTHING pops up when I try to open my second modal, and I am not getting any errors in my console log.

I need this project finished in a few hours, so its starting to get stressful.

HTML

<!-- FIRST MODAL (WORKING) -->

<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 modal that WORKS

.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

'use strict';
const modal = () => {
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

'use strict';
const modal2 = () => {
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;