JavaScriptで動的に生成した要素を指定する方法

Question

前提・実現したいこと

htmlで作成したbtnAをクリックすると、JavaScriptによって更にボタンが生成され、そのボタンをクリックすると別の要素が追加されるプログラムを作っています。

html
□btnA
□□(btnB1)【カッコ内は生成した要素】
□□□(div1)
□□□(div2)
□□□(div3)
□□(btnB2)
□□□(div1)
□□□(div2)
□□□(div3)
□□(btnB3)
□□□(div1)
□□□(div2)
□□□(div3)

JavaScript
□１.btnAをクリックするごとにbtnBが1つ生成される
□２.btnBをクリックするごとにdivが1つずつ生成される

生成したbtnBにidをループでつけていくところまでは分かったのですが、生成したbtnBをidで指定する方法が分かりません。
クリックしたbtnBの下にだけdivを追加し、他のbtnBには影響がないようにしたいです。
btnBをidで指定するにはループによって数字が付加されているため、書き方が分かりません。
idではなく、btnB全部に同じクラスをつけてthisで指定したほうがよいのでしょうか。

よろしくおねがいします。

該当のソースコード

<div id="btnA">//btnAをクリックして生成されたbtnB
    btnA
</div>
<div>//btnBparent
    <div id="btnB1">
        btnB1//←このボタンを指定したい
    </div>
    <div>//btnB1brother
        //btnB1をクリックすると生成されるbtnB1brotherの中身のdiv
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</div>

$(document).on('click', '#ボタンA', function () {
  i=1;
  var btnBparent = document.createElement('div');
  var btnB = document.createElement('div');
  var btnBbrother = document.createElement('div');
  $(btnB).attr({class:'btnB',id:'btnB'+i});
  i++;
  btnBparent.appendChild(btnB);
  btnBparent.appendChild(btnBbrother);
    //btnBをクリック
	//※この指定方法が分かりません
  $(document).on('click', '☆btnB？☆', function () {
    //div1,2,3を生成
    var btnBbrotherchild = document.createElement('div');
    btnBbrotherchild.appendChild(btnBbrotherchild(div1));
  });
});

Comments

[m.ts10806]

「例」が多すぎてイメージがわきづらいかと。
もっと具体的な値にしたうえで想定する結果と要件を記載されたほうが良いと思います。

[plasticgrammer]

> それともボタンB全部に同じクラスをつけてthisで指定したほうがよいのでしょうか
こちらで作れるなら、そのほうがイベント追加が一括でできるので楽かと思います。

提示いただいているコードは不足している処理もありそうです。
現状でどこまでできていて、何が問題となっているかを再度明記したほうが、回答しやすくなると思います。

[hebikirai]

質問文を修正しました。

Answer 1

<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.id=="btnA"){
    t.parentNode.append(
      Object.assign(document.createElement('div'),{textContent:"ボタンB","className":"btnB"})
      );
  }
  if(t.classList.contains("btnB")){
    t.parentNode.insertBefore(
      Object.assign(document.createElement('div'),{textContent:"C"}),t.nextElementSibling
      );
  }
});
</script>
<div id="btnA">ボタンA</div>

Comments

[hebikirai]

考えていたとおりに動きました。
ありがとうございました。