Почему код работает только один раз?

const button = document.querySelector('#pop-up-bag') 
const bag = document.querySelector('#pop-up-bag-container') 
const closePop = document.querySelector("#pop-up-bag-close");

document.addEventListener('DOMContentLoaded', () => { 

    button.addEventListener('click', () => { 
      bag.classList.toggle('open-pop') 
    })

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

.pop-up-bag{
    min-height: 100%;
    width: 30%;
    background: $white;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    transform: translateX(1000px);

    @include e(header){
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        &: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(num){
    }

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

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

.close-pop {
    transform: translateX(1000px);
    transition: transform .3s linear;
}

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


<div class="pop-up-bag" id="pop-up-bag-container">
            <div class="pop-up-bag__container">
              <div class="pop-up-bag__header">
                <div class="pop-up-bag__close">
                  <span class="pop-up-bag__icon" id="pop-up-bag-close"><i class="fa-solid fa-xmark pop-up-bag__i"></i></span>
                </div>
                <div class="pop-up-bag__title">
                  <h2 class="pop-up-bag__h2">Shopping Cart</h2>
                </div>
                <div class="pop-up-bag__count">
                  <span class="pop-up-bag__num">0</span>
                </div>
              </div>
              <div class="pop-up-bag__main">
                <p class="pop-up-bag__massage">Your cart is currently empty.</p>
              </div>
            </div>
          </div>