取得した値をテーブルに反映させたい

Question

実現したいこと

ユーザーがテーブルに入力した値を取得し，
ある場所（A）にその値が入った新しいテーブルを表示したいと考えています。

発生している問題

Aに新しいテーブルを表示させることはできましたが，
取得した値をそのテーブルに反映させる方法が分かりません。
ネットでも色々調べたのですが解決せず，ご教示いただけるとありがたいです。

 <div id="notetable" class="notetable">
  <table id="table">
   <tbody>
    <tr class="labels">
      <th class="label" colspan="2">Variables</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <th>A</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>B</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>C</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   </tbody>
  </table> 
 <div class="icon">
  <button id="submit" class="fas"><i class="fa-solid fa-check"></i></button>
</div>

<div class="noteview">
<div id="noteview" class="noteinner">
<p id="top"></p>
</div>
</div>

let button = document.getElementById('submit');
button.addEventListener('click', function(event2){
     event2.preventDefault();
     addtable();
    });

function addtable(notes) {
     // div要素を生成
    var note = document.createElement('div');
    const tool = document.createElement('div');
    // ノートテキスト
    var tablebox = document.createElement('div');
    tablebox.className = 'notetable2';
    //tableの要素を取得
    //ノートラベル
    var li2 = document.createElement('li');
    li2.innerText = element.value;
    li2.className = 'notelabel1';
    //タスクラベル
    var li3 = document.createElement('li');
    var currenttask = $('.slider').slick('slickCurrentSlide');
    
    if (currenttask === 0) {
    li3.innerText = 'Step 1: ';
    note.className = 'sticky1';
    tool.className = 'tool1';
    }   
    else if (currenttask === 1) {
    li3.innerText = 'Step 2: ';
    note.className = 'sticky1';
    tool.className = 'tool1';
    }
    else if (currenttask === 2) {
    li3.innerText = 'Step 3: ';
    note.className = 'sticky2';
    tool.className = 'tool2';
    }
    li3.className = 'notelabel2';
    
    //button
    var button = document.createElement('p');
    button.className = 'button'
    button.innerHTML = `
    <button class = "delete" id ="delete"><i class="fa-solid fa-trash"></i></button>
    `
    
    //
    note.appendChild(tool);
    tool.appendChild(li3);
    tool.appendChild(li2);
    tool.appendChild(button);
    note.appendChild(tablebox);

    // 生成したdiv要素を追加する
    var top = document.getElementById('top');
    top.after(note);

Comments

[yambejp]

全体的になにをしたいかわかりません。
何をトリガーにどうしたいか明示し、HTMLも例示ください

[skmr]

分かりづらく申し訳ありません，コードを追加しました。
テーブルに入力した後，Submitボタンのクリックをトリガーとしております。
恐れ入りますが，ご回答いただけますと幸いです。

[yambejp]

tdをすべてcontenteditableで処理するのですか？
（ちょっと問題のあるUIだとおもいますが）
編集後のデータをそのままtopの下に表示するのでしょうか？

Answer 1

仕様に不明な点が多いですが、エスパー的な解釈をして以下でどうでしょう？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('td').forEach(x=>x.contentEditable=true);
  document.querySelector('#submit').addEventListener('click',()=>{
    const t=table.cloneNode(true);
    t.removeAttribute('id');
    t.contentEditable=false;
    document.querySelector('#top').after(t);
  });
});
</script>
  <table id="table" border>
   <tbody>
    <tr class="labels">
      <th class="label" colspan="2">Variables</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <th>A</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>B</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>C</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   </tbody>
  </table>
<button id="submit" class="fas">submit</button>
<p id="top">top</p>

Comments

[skmr]

ありがとうございます！プログラミング初学者で知識が不十分なのですが，contenteditableはあまり使わない方がよいのでしょうか。いただいたコードを勉強してみます。ご回答くださり，ありがとうございました。

[yambejp]

contenteditableはブラウザによって実装がまちまちで、バグの温床になります。
特にユーザーに入力を指せる場合はinput要素などあらかじめHTMLに用意された
入力インタフェースを利用することを検討ください

なお、回答したソースは想定した動作と違いますか？
どう違うかを説明いただければそれにあわせた回答もできるかもしれません

[skmr]

返信が遅くなりすみません，まさに提示していただいたようなことをしたいと考えております。本当にありがとうございます。
重ねての質問で大変恐縮ですが，テーブルを要素の一部として（tableboxの中身として）追加したい場合はどうすればよいか分からず，もし可能でしたらご回答いただけますと幸いです。（コードを追加しておきました）よろしくお願いいたします。

[yambejp]

tableboxの仕様がいまいち何をしたいのかわかりません。
何をしたらどうなって欲しいのか、文書で説明できますか？
（できれば図示してもらったほうがわかりやすいですが）

[skmr]

図を追加しました。これで伝わりますでしょうか..？
もし複数回入力＋submitがなされた場合も，再度テーブルと外側のdivを追加したいと思っております。

[skmr]

その後，おかげさまで解決しました。本当にありがとうございました。