関連付けのさせ方が分かりません。

課題のリンク→　課題

[課題の要件]
・追加ボタン押下時にタスクを登録できる
・タスクには、「ID、コメント、状態」が含まれる
・IDは連番にする
・コメントはフォームで入力された値が表示される
・状態には、「作業中」と表示される
・削除ボタンが表示されている（ここでは押下時の動作はつけなくてよい）
上記の課題を作っている最中です。

現在の状態は以下の画像の通りです。

課題のとおり、IDの列に「数字」を、コメントの列に「フォームに入力された文字」、状態の列に「作業中と状態」を並べたいです。
「ID　コメント　状態」と「連番ID　フォームに入力された文字　作業中　削除」を関連させる方法が検索しても分かりませんでした。
言語化できないというか、Googleで検索にそもそもなんと検索すればいいのかも分からない状態です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23    <h3 id="id_h3">ID コメント 状態</h3>
24    <div id="todo"></div>
25    <h2>新規タスクの増加</h2>
26        
27    <p id = id_p>
28        <input type="text" id="id_text" value=""> 
29        <button id="btn" type="btn" class="button"> 追加</button>
30    </p>
31    </div>
32
33    <script>
34    let id = 0;
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37
38      const idEl = document.createElement("span");
39      idEl.textContent = id;
40      const comment = document.getElementById("id_text").value;
41      const commentEl = document.createElement("span");
42      commentEl.textContent = (comment);
43
44      const btn1El = document.createElement("button");
45      btn1El.textContent = "作業中";
46      const btn2El = document.createElement("button");
47      btn2El.textContent = "削除";
48
49      const divEl = document.createElement("div");
50      divEl.appendChild(idEl);
51      divEl.appendChild(commentEl);
52      divEl.appendChild(btn1El);
53      divEl.appendChild(btn2El);      
54      
55      const todoEl = document.getElementById("todo");
56      todoEl.appendChild(divEl);
57      id++;
58    }, false);
59      
60  </script>
61</body>
62</html>

H40831

2019/12/01 08:12

どのレベルで分からないですか？・JavaScriptでフォームの文字を取得する方法・JavaScriptのデータをHtmlに反映させる方法・JavaScriptのデータと、Htmlに反映した要素を関連付けする方法上記のどこかの具体的な方法がわからないのでしょうか？それとも、上記の流れ自体がわからなかったということでしょうか？