いやいやこんなタイトルでアクセスこないやろとか思いながら、でも僕がもし同じ状況ならこのワードでぐぐるかなぁとか思いながら書いてます。
おそらくgoogleという大海を渡ってこのページにたどり着いた方は
「javascriptのDOM操作でボタンを動的に作ったけど2つ目が反応しない方」
ですね？
もしそうだったら覗いて行ってください。
違った方は、、、任せます！！
javascriptで動的にボタンを作ったけどDOM操作できません
上記の問題を抱えている方に質問です。
ボタンをjavascriptで動的に作成した時に「id」はつけましたか？
もしかしたらつけずにただ変数だけ変えて新しいボタンが作れた気になってませんか？
DOMで2つ目のボタンを動かせない時のコード例
//1つ目のボタン
const triggerbutton = document.createElement("button");
document.body.appendChild(triggerbutton);
triggerbutton.addEventListener("click",function(){});
//2つ目のボタン
const newbutton = document.createElement("button");
container.appendChild(newbutton);
newbutton.addEventListener("click",function(){});
動的なボタンの作られ方
上記のコードだと実際に作られたHTMLの画面のbuttonは2つありますが違いがわかりません。
イメージだと以下のような感じ
<HTML>
<body>
<button></button>
<div id="container">
<button></button>
</div>
<body>
constはあくまで箱でしかないので名前が違っても中身は同じです。
よってボタンに対する処理を付け加えても、2個目のボタンに加えた処理（今回のコードだとクリックした時に何らかのイベントが走るようにする処理）は動きません。
idをつけてあげてボタンごとの識別ができるようにしてあげよう
2つ目のボタンにID属性をつけて別ボタンとして認識されるようにしたコードが以下のようなものです。
この場合2つめのボタンも反応するはずです。
//1つ目のボタン
const triggerbutton = document.createElement("button");
document.body.appendChild(triggerbutton);
triggerbutton.addEventListener("click",function(){});
//2つ目のボタン
const newbutton = document.createElement("button");
newbutton.id="newbutton";
container.appendChild(newbutton);
document.getElementById("newbutton").addEventListener("click",function(){});
上記のコードだとHTMLは以下のようになります
<HTML>
<body>
<button></button>
<div id="container">
<button id="newbutton"></button>
</div>
<body>
ボタンはそれぞれ別だと認識されるようにしよう！（idつけたり）
なぜ変数が存在するのか
中身同じなら変数なんて概念自体いらないんじゃないの？
と思う方もいるかもしれませんが、そんな暴論を言ってはいけません。
変数が存在しているおかげで私たちはわかりやすくデータを扱うことができるのです。
変数は「目印」です。
まとめ
・ボタンをDOM操作するときはidに注目
