Javascriptで1回しかアクションしない

Question

お世話になります。
Shopifyのアプリをカスタマイズしています。

button1、button2をそれぞれ押すとconsole.logに1,2を何度でも表示させたいのですが、初回1回のみ動作し、2回目以降動作がしません。
もし解決方法ありましたらご教示頂けますと幸いです。

<script type="text/javascript">
  // 監視の対象
  const observedTarget = document.getElementsByClassName('test')[0];
  
  const subscriptionObserver = new MutationObserver(records => {
    records.forEach((record) => {
      if (record.addedNodes.length === 0 || record.type !== 'childList') return;
      
      // 監視の停止
      subscriptionObserver.disconnect();
      
      // ボタン
      const button1 = document.getElementById('button1');
      const button2 = document.getElementById('button2');
      if (!button1 || !button2 ) return;

     //ここがなぜか1回しか動作しない
      button1.addEventListener('click', function () {
      console.log(1);
      })

      button2.addEventListener('click', function () {
      console.log(2);
      })
      
      const Label = document.querySelector('label[for="button"]');
      Label.click();
    });
  });
  
  // 監視の開始
  subscriptionObserver.observe(observedTarget, {
    childList: true
  });
</script>

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/5j94kzqr/

ご提示いただいていない部分に原因があると思われます。

[ozaki566]

お世話になっております。
試していただきありがとうございます…！

頂いたものでテストしましたが確かに問題なく動作しますね。。。
なぜかShopify上だと１回だけしか動作せずで。。
原因引き続き模索してみます。