JavaScript 配列番号表示について

前提・実現したいこと

javascriptでtodoリストを作っております。
項目追加ボタンを押すと項目の後ろに『作業中』か『完了』の状態を表す表すボタンがついており、切り替えることが出来ます。
『全体』『作業中』『完了』のラジオボタンが３つあって、その内の一つを押すとそれぞれの状態のリストが表示されます。
以下の例を見ていただきたいのですが、実装したいことは、全体のリストの配列番号をそのまま『作業中』『完了』に引き継ぎたいのに、配列番号が今現在のコードの場合絶対に０から始まってしまいます。

実装したいこと
【全部のリスト】0:あああ(作業)　1:いいい(完了)　2:ううう(作業) 3:えええ(完了)
【作業中のリスト】0:あああ 2:ううう
【完了のリスト】1:いいい 3:えええ
今現在の状態
【全部のリスト】0:あああ(作業)　1:いいい(完了)　2:ううう(作業) 3:えええ(完了)
【作業中のリスト】0:あああ 1:ううう
【完了のリスト】0:いいい 1:えええ

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

エラーメッセージなし

コード

javascrpt
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    <title>TodoList</title>
7</head>
8<body>
9    <h1>ToDoリスト</h1>
10    <div id="todo-list">
11        <input type="radio" name="select-item" id="all-select" checked>全て
12        <input type="radio" name="select-item" id="doing-select">作業中
13        <input type="radio" name="select-item" id="done-select">完了
14        <h2>新規タスクの追加</h2>
15        <input type="text" id="add-todo">
16        <input type="button" id="add-btn" value="追加">
17    </div>
18    <table>
19        <thead>
20            <th>ID</th>
21            <th> コメント </th>
22            <th> 状態 </th>
23            <th></th>
24        </thead>
25        <tbody  id="display">
26        </tbody>
27    </table>
28    <script>
29        'use strict';
30        //配列定義
31        const todoList = [];
32        const btn = document.getElementById('add-btn');
33        const todoListElement = document.getElementById('display');
34        btn.addEventListener('click', () => {
35            displayList();
36        });
37        //空の配列に入力値を入れていくfunction
38        const displayList = () => {
39            const todo = document.getElementById("add-todo").value;
40            document.getElementById("add-todo").value = "";
41            const todoItem = {task: todo, status: '作業中'};
42            const tasks = todoList.task;
43            if(todo){
44                todoList.push(todoItem);
45                displayResult(todoList);
46            }
47        };
48        //表示function
49        const displayResult = (filterdTodoList) => {
50            while(todoListElement.firstChild){
51                todoListElement.removeChild(todoListElement.firstChild);
52            };
53            filterdTodoList.forEach((todo, index) => {
54                const trList = document.createElement('tr');
55                //index番号の要素追加
56                const tdIndex = document.createElement('td');
57                tdIndex.textContent = index;
58                //コメントの要素追加
59                const tdValue = document.createElement('td');
60                tdValue.textContent = todo.task;
61                //作業中、削除ボタンの要素追加
62                const checkButton = createCheckButton(todo);
63                const removeButton = createRemoveButton(index);
64                //表示
65                trList.appendChild(tdIndex);
66                trList.appendChild(tdValue);
67                trList.appendChild(checkButton);
68                trList.appendChild(removeButton);
69                todoListElement.appendChild(trList);
70            });
71        };
72        //作業中ボタンの生成function
73        const createCheckButton = (todo) => {
74            const tdBtn = document.createElement('td');
75            const checkBtn = document.createElement('input');
76            checkBtn.setAttribute('type', 'button');
77            checkBtn.setAttribute('value', todo.status);
78            checkBtn.addEventListener('click', () => {
79                checkTodo(todo);
80            });
81            return checkBtn;
82        };
83        //削除ボタンの生成function
84        const createRemoveButton = (index) => {
85            const tdBtn = document.createElement('td');
86            const removeBtn = document.createElement('input');
87            removeBtn.setAttribute('type', 'button');
88            removeBtn.setAttribute('value', '削除');
89            removeBtn.addEventListener('click', () => {
90                removeTodo(index);
91            });
92            return removeBtn;
93        };
94        //作業中を押す
95        const checkTodo = (todo) =>{
96            if(todo.status === "作業中"){
97            todo.status = "完了";
98            }else{
99            todo.status = "作業中";
100            };
101            console.log(todo.status);
102            displayResult(todoList);
103        };
104        //削除を押す
105        const removeTodo = (index) =>{
106            todoList.splice(index,1);
107            displayResult(todoList);
108        };
109        //作業中リストアップ
110        const doingRadio = document.getElementById('doing-select');
111        doingRadio.addEventListener('click', () =>{
112            const filterdTodoList = todoList.filter(todo => todo.status === "作業中");
113            displayResult(filterdTodoList);
114        });
115　　　　//完了リストアップ
116        const doneRadio = document.getElementById('done-select');
117        doneRadio.addEventListener('click', () =>{
118            const filterdTodoList = todoList.filter(todo => todo.status === "完了");
119            displayResult(filterdTodoList);
120        });
121    </script>
122</body>
123</html>

試したこと

『作業中』『完了』のリスト作成は全体のリストとは別に配列を作ってfilterで絞り込んで格納しているのでindexをfilterdTodoListに引き渡してreturnで[index,todo.status === "作業中"]を返せばいいのではないかと思った。
→リスト細分化されずどのラジオボタンを押しても全体のリストが表示された。

プログラミング初心者で初歩的な質問で申し訳ありませんがぜひご回答いただければ幸いです。