cloneNode(true)で複製したボタンで繰り返し複製を行いたい

Question

前提・実現したいこと

javascriptにて、「追加ボタン」を押すことでcloneNode(true)でコピーした要素が複製して追加されるようにしたいです。
複製はきちんとできています。
しかし、イベント発火する対象のボタンがもともとあったボタンでしか反応しません。

ページ画像

実現したいこと

• 「追加ボタン」を押す
• イベント発火して複製した要素が下に追加される
• 追加した要素内に新たに設置した「追加ボタン」を押す
• 複製される

という繰り返しを行いたいのですが、イベント発火の対象のボタンを切り替えることができずに困っております。
よろしくお願いいたします。

該当のソースコード

window.addEventListener('load', function (){
  const createTimeZone = (btnAreaCount) => { 
    let timeAreaCount = document.querySelectorAll(".container").length;  
    let timeArea = document.getElementById(`card-area-${timeAreaCount}`);
    let cloneElement = timeArea.cloneNode(true);
    cloneElement.id = `card-area-${timeAreaCount + 1}`;
    btnElement = cloneElement.querySelector(`#add-btn-${btnAreaCount}`);
    btnElement.id = `add-btn-${btnAreaCount + 1}`;
    timeArea.after(cloneElement);
  };
  
  let btnAreaCount = document.querySelectorAll(".addbtn").length;  
  let addBtn = document.getElementById(`add-btn-${btnAreaCount}`);
  
  addBtn.addEventListener('click', function (){
      createTimeZone(btnAreaCount);
      btnAreaCount += 1;
    })
});

<div>
    <div class="card-header fixed-bottom text-center">
          <h3 id="RealTimeArea1"class="card-title"></h3>
    </div>
    
    <div class="container" id="card-area-1">
      <div class="card mb-3  shadow-sm text-center">
          <div class="card-body">
            <div class="container-fluid">
              <h5><label for="InputDateTime">現時表示の時刻を選択</label></h5>
                <input type="datetime-local" class="shadow-sm" style= "width: 190px;" id="InputDateTime">
                <input id="InputSecondTime" type="number" class="shadow-sm" placeholder="秒数を入力" style= "width: 110px;" min="0" max="59"><label>秒</label>
                <button type="button" class="btn btn-primary btn-sm" id="check-current-time">確認</button>
              <h3 id="RealTimeArea1"class="card-title"></h3>
              <h2 id="TimeDeference"></h2>
              <h5><label for="InputDateTimePass">再生中の表示時刻を選択</label></h5>
                <input type="datetime-local" class="shadow-sm" id="InputDateTimePass" style= "width: 190px;">
                <input id="InputSecondTimePass" type="number" class="shadow-sm" placeholder="秒数を入力" style= "width: 110px;" min="0" max="59"><label>秒</label> 
              <button type="button" class="btn btn-primary btn-sm" id="check-correction-time">確認</button>
              <h2 id ="CorrectionTime"></h2>
              <div class="text-center addbtn">
                  <button class="m-2 btn btn-outline-success" style="width: 190px;" id="add-btn-1">追加</button>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

問題点

デバッグで確認したところ、複製して追加されたadd-btn-番号は追加するごとに数字が増えるようにできているのですが、複製先のボタンを押した時に、イベント発火元のaddBtnが変化しておらず、複製元のボタンのDOMを取得していることが原因だと思うのですが、変えることができません。

補足情報（FW/ツールのバージョンなど）

OS: mac Bigsur
bootstrap
ブラウザ：chrome

Answer 1

cloneNode()ではイベントリスナは複製されません。
動的に足される要素にイベントリスナを登録するのは面倒なので、ボタンに共通のclassを付けて、document で click イベントを見ればよいです。addBtn.addEventListener(...) は不要です。

ボタンに class="add-button" を付けたとすると、

document.addEventLisetner('click', event => {
  if (event.target.closest('.add-button'))
    createTimeZone(btnAreaCount++);
});

Comments

[hi-roto]

できました。感動しました。
ボタンごとにgetElementByidでHTMLを取得しないといけないとばかり思ってました。
documentでイベント発火させればいいわけですね。
とても勉強になりました。
ありがとうございました。