输入字段值重复

我是第一次发帖，所以我不知道写这个问题的最佳方式。我会尽量说清楚。我正在尝试做 TODOLISt 应用程序。我的目的是在单击时添加项目并将它们显示在下表中。但是，物品会不断堆叠在一起。例如：如果我添加一项任务，按添加它会返回该任务。问题获取然后添加第二个，它返回第一个任务和第二个而不是第二个。我怎样才能得到第二个？

在下面的图片链接中，我已保存到任务，但得到了三个输出。

![文本] ( https://ibb.co/S7N31Cx );

HTML

  <form>
        <div>
            <label for="todo-date">Date</label>
            <input type="date" class="todo-date" id="todo-date">
        </div>
        <div>
            <label for="todo-task">Task</label>
            <input type="text" class="todo-input" id="todo-task">
        </div>
        <div>
            <label for="todo-responsible">Who is responsible</label>
            <input type="text" class="todo-responsible" id="todo-responsible">
        </div>
        <div>
            <button class="todo-button" id="todo-button">
                <i class="fas fa-plus-square"></i>
        </button>
        </div>
    
</form>
<table>
    <tr>
        <th>Date</th>
        <th>Task</th>
        <th>Responsible</th>
    </tr>
    <tr id="tbl-result" class="tblResult">
        <!--<td><input id="addClient" type="button" value="add" onclick="addClient()" /></td>
        <td><input id="viewClient" type="button" value="show" onclick="viewClient()" /></td> -->
        <tr></tr>
    </tr>
</table>

爪哇脚本

const toDoInput = document.getElementById('todo-task');
const toDoResp = document.getElementById('todo-responsible');
const toDoButton = document.getElementById('todo-button');
const tblResult = document.getElementById('tbl-result');
const toDoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');

// Event listeners
toDoButton.addEventListener('click', addToDo);
// Functions


// Class and Constructor



class clsTask {
    constructor (toDoDate, toDoInput, toDoResp) {
        this.toDoDate = toDoDate;
        this.toDoInput = toDoInput;
        this.toDoResp = toDoResp;
    }
}

let tasks = [];

function addToDo (event) {
    event.preventDefault();
    let task = new clsTask(toDoDate.value, toDoInput.value, toDoResp.value);

    tasks.push(task);
    toDoDate.value = "";
    toDoInput.value = "";
    toDoResp.value = "";

        for (let i=0; i < tasks.length; i++) {
            let tr = document.createElement('tr');
            tblResult.appendChild(tr);
            tr.appendChild(document.createElement("td").appendChild(document.createTextNode(tasks[i].toDoDate)));
            tr.appendChild(document.createElement("td").appendChild(document.createTextNode(tasks[i].toDoInput)));
            tr.appendChild(document.createElement("td").appendChild(document.createTextNode(tasks[i].toDoResp)));
            }
    }