To-do list application

Question

I use a lot of for loops and I think it slows the code down a lot but I have no idea how else this code could be written. Its for a to-do list app and each for loop adds an eventListener to each button on each task (edit, delete, check).

Is there a more efficient way to write this?

import {myTasks,newTaskForm,rightSide,projectContainer,displayType} from './index';

const today = new Date().toLocaleDateString('en-ca');
let count = 0;
let todayTasks = [];

const tasks = () => {
  const task = (title, duedate, completed, position, editing, checked, display, id, taskClass) => {
    return {title,duedate,completed,position,editing,checked,display,id,taskClass}
  }

  const addTask = () => {
    const newTask = task(`<input type="text" id="edit-title-${count}" placeholder="Task" required>`,
    `<input type="date" id="edit-date-${count}" name="duedate" min="${today}">`, false, count, false);

    if (newTask.completed == true) {
      newTask.checked = "checked";
      newTask.taskClass = "completed-task"
    }
    else if (newTask.completed == false) {
      newTask.checked = ""
      newTask.taskClass = "task-container"
    }

    if (displayType == "today") {
      newTask.duedate = `<input type="date" id="edit-date-${count}" name="duedate" min="${today}" value="${today}">`;
    }

    myTasks.push(newTask);

    newTask.id = "task-container-" + count;
    count += 1;
    updateTaskDisplay();
  }

  const updateTaskDisplay = () => {
    for (var i=0;i<myTasks.length;i++) {
      myTasks[i].display = "<div class='" + myTasks[i].taskClass + "' id='" + myTasks[i].id + "'>" + "<div id='newtask-completed'>" + "<input type='checkbox' id='toggle'" + myTasks[i].checked + ">"
      + myTasks[i].title + "</div>" + "<div id='newtask-duedate'>" + myTasks[i].duedate
      + "</div>" + "<div class='buttons'>" + "<button id='edit'>" + `<img src="edit-button.svg" alt="Edit" height="12px">` + "</button>" + "<button id='delete'>" + 'x' + "</button>" + "</div>" + "</div>"
    }
    if (displayType == "today") {
      displayTodayTasks();}

    else if (displayType == "all") {
      displayAllTasks();}
  }

  const displayAllTasks = () => {
    rightSide.innerHTML = "";
    for (var i=0;i<myTasks.length;i++) {
      rightSide.innerHTML += myTasks[i].display
    }
    toggleCheck();
    editTask();
    removeTask();
  }

  const displayTodayTasks = () => {
    rightSide.innerHTML = "";
    todayTasks = [];
    for (var i=0;i<myTasks.length;i++) {
      if (myTasks[i].duedate == today || myTasks[i].duedate.includes(`value="${today}"`)) {
        todayTasks.push(myTasks[i])
        rightSide.innerHTML += myTasks[i].display
    }}
    toggleCheck();
    editTask();
    removeTask();
  }

  const toggleCheck = () => {
    const toggle = document.querySelectorAll('#toggle')
    let toggleIndex;
    toggle.forEach((button, i) => {
      button.addEventListener("click", () => {
        if (displayType == "today") {
          toggleIndex = myTasks.indexOf(todayTasks[i]);
        }
        else if (displayType == "all") {
          toggleIndex = i;
        }
        myTasks[toggleIndex].completed = !myTasks[toggleIndex].completed
        if (myTasks[toggleIndex].checked == "checked") {
          myTasks[toggleIndex].checked = "";
          myTasks[toggleIndex].taskClass = "task-container"
          updateTaskDisplay();
        }
        else {
          myTasks[toggleIndex].checked = "checked";
          myTasks[toggleIndex].taskClass = "completed-task"
          updateTaskDisplay();}
    })})}

  const editTask = () => {
    const edit = document.querySelectorAll("#edit")
    let editIndex;
    edit.forEach((editButton, i) => {
      editButton.addEventListener("click", () => {
        if (displayType == "today") {
          editIndex = myTasks.indexOf(todayTasks[i]);
        }
        else if (displayType == "all") {
          editIndex = i;
        }
        if (myTasks[editIndex].editing) {
          myTasks[editIndex].title = `<input type='text' id='edit-title-${myTasks[editIndex].position}' size='15' value="${myTasks[editIndex].title}">`
          myTasks[editIndex].duedate = `<input type='date' id='edit-date-${myTasks[editIndex].position}' min=${today} value="${myTasks[editIndex].duedate}">`
          updateTaskDisplay();
          myTasks[editIndex].editing = false;
        }
        else if (!myTasks[editIndex].editing) {
          let editTitle = document.getElementById(`edit-title-${myTasks[editIndex].position}`)
          let editDate = document.getElementById(`edit-date-${myTasks[editIndex].position}`)
          myTasks[editIndex].title = editTitle.value;
          myTasks[editIndex].duedate = editDate.value;
          updateTaskDisplay();
          myTasks[editIndex].editing = true;
        }
      })
  })}

  const removeTask = () => {
    const del = document.querySelectorAll("#delete")
    del.forEach((x, i) => {
      x.addEventListener("click", () => {
        if (displayType=="all") {
          myTasks.splice(i, 1)
          displayAllTasks()}
        else if (displayType=="today"){
          myTasks.splice((myTasks.indexOf(todayTasks[i])), 1)
          todayTasks.splice(i, 1)
          displayTodayTasks()}
    })})}

  return {tasks, task, addTask, displayAllTasks, displayTodayTasks}
}

export {tasks, today};