JavaScriptでdiv要素を複製したいが、同ページに同idが存在してしまいエラー

Question

###前提・実現したいこと
独学で学習中の2ヶ月目の初心者です。
CSSで作ったdivboxにidを付け、JavaScriptで①～③のボタンからの操作で
①boxに指定した色を着ける
②boxを10個、複製
③隣の行に10個、複製

という動作を実装したい

###発生している問題・エラーメッセージ
色をつけて、複製という動作はうまくいっているが、
①、②まで完了させた後、①で別の色を指定して③を実行すると
最初の色のまま複製されてしまいます。

初心者なりに考えたのですが、同じID要素が複製されてしまっているので
動作しないのでしょうか。。

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
JSからCSSへの指定をidではなく、class要素で試したのですが、
getElementByIdが使えなくなってしまいました・・

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[退会済みユーザー]

該当するHTMLコードとJSコードを載せていただけますか？

[m.ts10806]

本文中に書くより質問編集画面の質問タイトル横にある初心者アイコンを利用してください。

Answer 1

初心者なりに考えたのですが、同じID要素が複製されてしまっているので

動作しないのでしょうか。。

yes。IDは画面内に1つだけというHTML上のルールがあります。
ID ＝ IDentification ＝ 身元確認 ＝ 1つに特定されるもの　です。

JSからCSSへの指定をidではなく、class要素で試したのですが、

getElementByIdが使えなくなってしまいました・・

classの場合はgetElementsByClassNameですが、Element「s」と複数形になっている通り、対象のクラスを含む要素全てを取得します（配列です）

回避するには既に回答が出ているように複製するたびにidを付け替える（連番とか）とか、
そもそもidも何もないboxをcreateElementで最初に作っておき、
ボタンを押すたびにcreateElementで作った要素をIDをつけながら順番に貼り付ける、とか別の工夫をした方がいいように思います。

Answer 2

③隣の行に10個、複製

というのが、いまいちよくわかりませんが

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector("input[type=button][value='set color']").addEventListener('click',function(e){
    var n1=document.querySelector("#hoge1");
    n1.style.backgroundColor="red";
    var n2=n1.nextSibling;
    for(var i=0;i<10;i++){
      var n3=n1.cloneNode(true);
      n3.removeAttribute("id");
      n3.textContent=i;
      n1.parentNode.insertBefore(n3,n2);
    }
  });
});

<div id="wrap">
<div id="hoge1">abc</div>
<input type="button" value="set color">
</div>

Answer 3

そう思うなら、複製する時にidに番号を付け加えるとか試してみれば良いのではないでしょうか。
どのようなhtmlやjavascriptを試したのか何も示されていないので、動作しないのでしょうかと聞かれても誰もyesとかnoとか答えられないですよ。