DOMに追加した要素に対してクリックイベントを発火させたい

前提・実現したいこと

JavaScriptで現在todoアプリを作成しています。
追加したtodoの詳細はlocalStorageを使って保存させています。

発生している問題・エラーメッセージ

todoの一つずつにtodoの完了か未完了を表すボタンがあるのですがtodoを追加した要素に対してクリックイベントで要素の状態を変更するようにしたいのですが、追加後にはまだstatesという変数に要素が入っていないためstateChangeのクリックイベントに反応がしない。

該当のソースコード

javascript
1
2const tabChange = (tabs) => {
3  tabs.forEach((tab, index) => {
4    tab.addEventListener("click", (e) => {
5      tabs.forEach((tab) => tab.classList.remove("active"));
6      tab.classList.add("active");
7    })
8  });
9}
10
11const Html = (id, content, state) =>{
12  return `<tr class="detail">
13            <td class="id">${id}</td>
14            <td class="content">${content}</td>
15            <td class="state"><input type="button" value="${state}"></td>
16            <td class="remove"><input type="button" value="remove"></td>
17          </tr>`
18}
19
20const stateChange = (states, todos) => {
21  states.forEach((state, index) => {
22    state.addEventListener("click", (e) => {
23      console.log(e)
24      const states = document.querySelectorAll(".main table .detail .state")
25      if (todos[index].state === "completed"){
26        todos[index].state = "working";
27        state.value = "working";
28      } else if (todos[index].state === "working") {
29        todos[index].state = "completed";
30        state.value = "completed";
31      }
32      localStorage.setItem("todos", JSON.stringify(todos))
33    })
34  });
35}
36
37const todoLists = (todos, tbody) => {
38  todos.forEach((todo) => {
39    tbody.insertAdjacentHTML('beforeend', Html(todo.id, todo.content, todo.state))
40  })
41}
42
43const todoAdd = (todos, tbody, states) =>{
44  const input = document.querySelector('.main form .inputs input[type="text"]');
45  const button = document.querySelector('.main form .inputs input[type="button"]');
46  button.addEventListener("click", () => {
47    obj = {
48      id: todos.length + 1,
49      content: input.value,
50      state: "working"
51    }
52    input.value = "";
53    todos.push(obj);
54    localStorage.setItem("todos", JSON.stringify(todos));
55    tbody.insertAdjacentHTML('beforeend', Html(obj.id, obj.content, obj.state))
56    location.reload();
57  });
58}
59const tabs = document.querySelectorAll(".main form .tabs label");
60const todos = JSON.parse(localStorage.getItem("todos") || '[]');
61const tbody = document.querySelector("table tbody")
62todoLists(todos, tbody);/*todoの一覧表示 */
63tabChange(tabs);/*タブ切り替えイベント  */
64const states = document.querySelectorAll(".main table .detail .state input")
65// console.log(states)
66todoAdd(todos, tbody, states)/*todoの追加イベント */
67stateChange(states, todos)
68
69

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.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link rel="stylesheet" href="/ress.css">
8  <link rel="stylesheet" href="/style.css">
9  <title>ピュアJSでtodoアプリを作ってみた</title>
10</head>
11<body>
12  <section class="main">
13    <h1>My-Todos</h1>
14    <form action="#" name="form">
15      <div class="tabs">
16        <label class="all">all<input type="radio" name="state" checked="checked"></label>
17        <label class="working">working<input type="radio"name="state"></label>
18        <label class="compuleted">completed<input class="state" type="radio"name="state"></label>
19      </div>
20      <div class="inputs"><input type="text"><input type="button" value="ADD"></div>
21    </form>
22    <table>
23      <tbody>
24        <tr class="head">
25          <th>ID</th>
26          <th>CONTENT</th>
27          <th>STATE</th>
28          <th>REMOVE</th>
29        </tr>
30        <!-- ここに要素を追加します！ -->
31      </tbody>
32    </table>
33  </section>
34  <script src="/script.js" defer></script>
35</body>
36</html>