Why does a new input overwirtes old one?

Question

I want to save the todo object with its properties in an array, but if I add a new todo it overwrites the old one. I can't think of any possible problem, the code looks right to me.

let head = document.getElementById('txtBox')
let date = document.getElementById('date')
let description = document.getElementById('description')
let todoId = 0

// all Todos
const allTodos = { list: [] }

// to save inputs
let todo = {
  "name": "",
  "description": " ",
  "date": " ",
  "done": false,
  "id": 0
}

let head = document.getElementById('txtBox')
let date = document.getElementById('date')
let description = document.getElementById('description')
let todoId = 0

// all Todos
const allTodos = {
  list: []
}

// to save inputs
let todo = {
  "name": "",
  "description": " ",
  "date": " ",
  "done": false,
  "id": 0
}

function getInput() {
  todoId++
  setInput(head.value, date.value, description.value, todo.id)
  resetInputFields()

}

// put input in array
function setInput(head, description, date) {
  //no input without headline
  if (head) {
    todoId++
    todo.name = head
    todo.description = description
    todo.date = date
    todo.id = todoId;
    // push input into objet array
    allTodos.list.push(todo)
    console.log(allTodos);

  } else {
    console.log("Please enter a name");
  }

}

// reset userInput
function resetInputFields() {
  head.value = ""
  date.value = ""
  description.value = ""
}

//reset Object
function resetTodo() {
  todo.name = ""
  todo.description = ""
  todo.date = ""
}

<center>
    <input type="text" id="txtBox"><br>
    <input type="date" name="" id="date"><br>
    <textarea id="description" cols="30" rows="10"></textarea>
    <div id="add" onclick="getInput()" style="cursor: pointer;">add</div>
    <div id="task"></div>
</center>