[Nexus]

ID должен быть уникальным.
Не могу понять логику вашего кода.

Набросал свой пример кода:

<button type="button" data-open-popup="popup-1">Вперед</button>

<div class="popup" id="popup-1">
    <div class="popup__content">
        Popup #1
        <button type="button" 
                data-close-popup="popup-1"
                data-open-popup="popup-2">Вперед</button>
    </div>
</div>

<div class="popup" id="popup-2">
    <div class="popup__content">
        Popup #2
        <button type="button" data-close-popup="popup-2">Закрыть</button>
    </div>
</div>

<style>
    .popup {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 1;
      background: rgba(255, 255, 255, 0.7);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .popup.opened {
      display: flex;
    }

    .popup__content {
      border: solid 1px #000;
      box-shadow: 0 0 10px #000;
      padding: 10px 20px;
      max-width: 90%;
    }
</style>

<script>
    document.addEventListener('click', function(e) {
        var target = e.target,
            selector = '[data-open-popup], [data-close-popup]';

        if (!target || !target.matches || !target.matches(selector) && !(target = target.closest(selector))) {
            return;
        }

        var closePopupId = target.getAttribute('data-close-popup'),
            openPopupId = target.getAttribute('data-open-popup');

        closePopupId && closePopup(closePopupId);
        openPopupId && openPopup(openPopupId);
    });

    function closePopup(popupId) {
        document.getElementById(popupId).classList.remove('opened');
    };

    function openPopup(popupId) {
        document.getElementById(popupId).classList.add('opened');
    };
</script>