画面が初期化されないようにしたい。

###前提・実現したいこと
①作業中、完了のラジオボタンを選択中に新しいTaskを追加する時、画面が初期化されないようにしたい。

現在、抱えている問題は作業中、完了のラジオボタンを選択している時にTaskの追加をすると
画面が初期化され全てのTaskが表示されてしまう。（Task追加後に作業中のラジオボタンをクリックすると作業中のTaskのみが表示されるようになります）

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

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel='stylesheet' href='style.css'>
9    <title>TodoList</title>
10</head>
11
12<body>
13    <h1>ToDoリスト</h1>
14    <form>
15        <input type="radio" name="state" id="allTodo" checked>
16        <label for="allTodo">すべて</label>
17        <input type="radio" name="state" id="workingTodo">
18        <label for="workingTodo">作業中</label>
19        <input type="radio" name="state" id="doneTodo">
20        <label for="doneTodo">完了</label>
21    </form>
22
23    <div>
24        <table>
25            <thead>
26                <tr>
27                    <th>ID</th>
28                    <th>コメント</th>
29                    <th>状態</th>
30                </tr>
31            </thead>
32            <tbody id="todoList">
33
34            </tbody>
35        </table>
36
37    </div>
38
39    <h2>新規タスクの追加</h2>
40    <form>
41        <input type="text" id="todoInput" value="">
42        <button type="submit" value="追加" id="addTaskButton">追加</button>
43    </form>
44    <script src="main.js"></script>
45</body>
46
47</html>

CSS
1.hide {
2    display: none;
3}

JavaScript
1const allTodo = document.getElementById('allTodo')
2const workingTodo = document.getElementById('workingTodo')
3const doneTodo = document.getElementById('doneTodo')
4const todoList = document.getElementById('todoList');
5const addTaskButton = document.getElementById('addTaskButton');
6const textBox = document.getElementById('todoInput');
7
8const todos = [];
9let taskId = 0;
10
11
12addTaskButton.addEventListener('click', (e) => {
13    e.preventDefault();
14    const todoInput = { task: textBox.value, state: '作業中' };
15    todoInput.id = taskId;
16    textBox.value = '';
17    if (todoInput.task.match(/\S/g)) {
18        //空白以外の文字に一致したら配列に追加
19        todos.push(todoInput);
20        textBox.focus();
21        taskId++;
22    }
23    addTask();
24});
25
26
27//配列に格納されたToDoをHTMLに表示させる為の関数
28const addTask = () => {
29    while (todoList.firstChild) {
30        todoList.removeChild(todoList.firstChild);
31    }
32
33    todos.forEach((todo, id) => {
34        const tr = document.createElement('tr');
35        tr.setAttribute('data-id', todo.id)
36        todoList.appendChild(tr);
37
38        const idTd = document.createElement('td');
39        const comment = document.createElement('td');
40        const stateTd = document.createElement('td');
41        const deleteTd = document.createElement('td');
42
43        tr.appendChild(idTd);
44        tr.appendChild(comment);
45        tr.appendChild(stateTd);
46        tr.appendChild(deleteTd);
47
48        idTd.textContent = id;
49        comment.textContent = todo.task;
50
51        stateTd.appendChild(createStateButton(id));
52        deleteTd.appendChild(createDeleteButton(id));
53    });
54};
55
56
57//状態を管理する為のボタンを作成する関数
58const createStateButton = (id) => {
59    const workingBtn = document.createElement('button');
60    workingBtn.textContent = todos[id].state;
61    workingBtn.classList.add('state');
62    workingBtn.addEventListener('click', () => {
63        if (todos[id].state === '作業中') {
64            todos[id].state = '完了';
65        } else {
66            todos[id].state = '作業中';
67        }
68        addTask();
69    });
70    return workingBtn;
71};
72
73
74//ToDoを削除するボタンを作る為の関数
75const createDeleteButton = (id) => {
76    const deleteBtn = document.createElement('button');
77    deleteBtn.textContent = '削除';
78    deleteBtn.addEventListener('click', () => {
79        if (id > -1) {
80            todos.splice(id, 1);
81        }
82        addTask();
83    });
84    return deleteBtn;
85};
86
87
88//作業中のラジオボタン押すと完了済みのTASKを隠す関数
89workingTodo.addEventListener('click', () => {
90    const tr = document.querySelectorAll('tr[data-id]');
91    tr.forEach((todo) => {
92        const stateBtn = (todo.querySelector('.state'));
93        if (stateBtn.textContent === '完了') {
94            todo.classList.add('hide');
95        } else {
96            todo.classList.remove('hide');
97        }
98    });
99});
100
101//完了のラジオボタンを押すと作業中のTASKを隠す関数
102doneTodo.addEventListener('click', () => {
103    const tr = document.querySelectorAll('tr[data-id]');
104    tr.forEach((todo) => {
105        const stateBtn = (todo.querySelector('.state'));
106        if (stateBtn.textContent === '作業中') {
107            todo.classList.add('hide');
108        } else {
109            todo.classList.remove('hide');
110        }
111    });
112});
113
114//すべてのラジオボタンを押すと全てのTASKが表示される関数
115allTodo.addEventListener('click', () => {
116    const tr = document.querySelectorAll('tr[data-id]');
117    tr.forEach((todo) => {
118        todo.classList.remove('hide');
119    });
120});