How to make two popup overlays on the same page?

Question

JavaScript

How to make two popup windows on one page with these effects: https://tympanus.net/Development/FullscreenOverlay... ?
overlay-1 code:

<button id="trigger-overlay">Открыть оверлей-2</button>
<div class="overlay overlay-slidedown">Содержимое оверлея-1</div>
      <button type="button" class="overlay-close-modal">Закрыть оверлей-1</button>

overlay-2 code:

<button id="trigger-overlay-modal" type="button">Открыть оверлей-2</button>
<div class="overlay modal overlay-scale">Содержимое оверлея-2</div>
    <button type="button" class="overlay-close-modal">Закрыть оверлей-2</button>

Below is the script for the first overlay. What variables need to be changed in js here to open the second overlay? When I replace classes in brackets, the button always opens only the first overlay on the page

(function() {
  var triggerBttn = document.getElementById( 'trigger-overlay' ),
    overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
      'WebkitTransition': 'webkitTransitionEnd',
      'MozTransition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'msTransition': 'MSTransitionEnd',
      'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

  function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
      classie.remove( overlay, 'open' );
      classie.add( overlay, 'close' );
      var onEndTransitionFn = function( ev ) {
        if( support.transitions ) {
          if( ev.propertyName !== 'visibility' ) return;
          this.removeEventListener( transEndEventName, onEndTransitionFn );
        }
        classie.remove( overlay, 'close' );
      };
      if( support.transitions ) {
        overlay.addEventListener( transEndEventName, onEndTransitionFn );
      }
      else {
        onEndTransitionFn();
      }
    }
    else if( !classie.has( overlay, 'close' ) ) {
      classie.add( overlay, 'open' );
    }
  }

  triggerBttn.addEventListener( 'click', toggleOverlay );
  closeBttn.addEventListener( 'click', toggleOverlay );

})();

Answer 1

you need to change not only the classes, but also the id of the element.

var triggerBttn = document.getElementById( 'trigger-overlay-modal' )