Popup не появляется при клике, хотя класс успешно меняется

const button1 = document.querySelector('#pop-up-like') 
const bag1 = document.querySelector('#pop-up-like-container') 
const closePop1 = document.querySelector("#pop-up-like-close");

document.addEventListener('DOMContentLoaded', () => { 
  
    button1.addEventListener('click', () => { 
      bag1.classList.add('open-pop') ;
    })

    window.addEventListener('click', e => { 
      const target1 = e.target;
      if (!target1.closest('#pop-up-like-container') && !target1.closest('#pop-up-like') || target1.closest('#pop-up-like-close')) { 
        bag1.classList.remove('open-pop'); 
      }
      
    })
});

// пишу на scss, e - это элемент, а m - это модификатор

.pop-up-like{
    display: block;
    width: 30%;
    min-height: 100%;
    background: $white;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
    transform: translateX(1000px);
    transition: transform .3s linear;

    @include e(header){
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
        &:after{
            content: '';
            width: 100%;
            height: 1px;
            background: $colorBorderShoppingCart;
            position: absolute;
            bottom: 0;
           }
    }

    @include e(close){
        position: relative;
        padding: 15px;

        &::after{
            content: '';
            width: 1px;
            height: 54px;
            background: $colorBorderShoppingCart;
            position: absolute;
            right: 0px;
            top: 0;
           }
    }

    @include e(i){
        font-size: 25px;
        &:hover {
            color: $red;
            cursor: pointer;
        }
    }

    @include e(h2){
      margin: 0;
      margin-top: 11px;
    }

    @include e(count){
        padding: 15px;
        display: flex;
        align-items: center;
        position: relative;
        &::after{
            content: '';
            width: 1px;
            height: 54px;
            background: $colorBorderShoppingCart;
            position: absolute;
            left: 0;
            top: 0;
           }
    }

    @include e(main){
        font-size: 18px;
        display: flex;
        justify-content: center;
    }

}

.open-pop{
    transform: translateX(0);
    transition: transform .3s linear;
}

            <img class="header-for-992px__right_img" id="pop-up-like" src="svg/like.svg" alt="">


 <div class="pop-up-like" id="pop-up-like-container">
            <div class="pop-up-like__container">
              <div class="pop-up-like__header">
                <div class="pop-up-like__close">
                  <span class="pop-up-bag__icon" id="pop-up-like-close"><i class="fa-solid fa-xmark pop-up-bag__i pop-up-like__i"></i></span>
                </div>
                <div class="pop-up-like__title">
                  <h2 class="pop-up-like__h2">LikeList</h2>
                </div>
                <div class="pop-up-like__count">
                  <span class="pop-up-like__num">0</span>
                </div>
              </div>
              <div class="pop-up-like__main">
                <p class="pop-up-like__massage">Your list is currently empty.</p>
              </div>
            </div>
          </div>