我的ToDoList无法正常工作。请帮帮我

Question

在我的ToDoList中，我实现了逻辑。单击addTask按钮时应该添加任务（添加任务，一切都很好）。然后，添加任务后，我们可以将其标记为已完成或删除。我编写的代码通过仅添加一项任务来实现此目的。如果添加多个任务，则只会删除最后添加的任务或将其添加到已完成的任务中。要删除的行为并添加到所有已完成的任务中，而不仅仅是最后添加的任务。我为每个任务分配一个唯一的ID。我认为问题与此有关。我不明白为什么？帮我。

let items = [];

function list() {
    const itemsBlock = document.querySelector("#currentTasks");
    const completeBlock = document.querySelector('#completedTasks')
    completeBlock.innerHTML = "";
    itemsBlock.innerHTML = "";
	for (let item of items) {
        if(item.complete == true) {
            completeBlock.innerHTML += `<li class="list-group-item d-flex w-100 mb-2" id="item-${item.id}">
            <div class="w-100 mr-2">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">${item.title}</h5>
                    <div>
                        <small class="mr-2">${item.pripority} priority</small>
                        <small>${item.date.toLocaleString()}</small>
                    </div>
                </div>
                <p class="mb-1 w-100">${item.text}</p>
            </div>
            <div class="dropdown m-2 dropleft">
                <button class="btn btn-secondary h-100" type="button" id="dropdownMenuItem1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
                <div class="dropdown-menu p-2 flex-column" aria-labelledby="dropdownMenuItem1">
                    <button type="button" class="btn btn-danger w-100" id="delete-${item.id}">Delete</button>
                </div>
            </div>
        </li>`
        }else {
  	    itemsBlock.innerHTML += `<li class="list-group-item d-flex w-100 mb-2" id="item-${item.id}">
      <div class="w-100 mr-2">
          <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">${item.title}</h5>
              <div>
                  <small class="mr-2">${item.pripority} priority</small>
                  <small>${item.date.toLocaleString()}</small>
              </div>
          </div>
          <p class="mb-1 w-100">${item.text}</p>
      </div>
      <div class="dropdown m-2 dropleft">
          <button class="btn btn-secondary h-100" type="button" id="dropdownMenuItem1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-ellipsis-v"></i>
          </button>
          <div class="dropdown-menu p-2 flex-column" aria-labelledby="dropdownMenuItem1">
              <button type="button" class="btn btn-success w-100" id="complete-${item.id}">Complete</button>
              <button type="button" class="btn btn-info w-100 my-2" id="edit-${item.id}">Edit</button>
              <button type="button" class="btn btn-danger w-100" id="delete-${item.id}">Delete</button>
          </div>
      </div>
  </li>`
    }
  };
}

function chooseRadio(radios) {
    for (let i = 0; i < radios.length; i++) {   
         if (radios[i].checked) {       
            return radios[i];     
        }     
    }  
};

function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }


function add(id) {
    items.push({
        "id": id,
        "title": document.querySelector("#inputTitle").value,
        "text": document.querySelector("#inputText").value,
        "pripority":chooseRadio(document.querySelectorAll('input[name=gridRadios]')).value,
        "date": new Date(),
        'complete': false
    });
};

function remove(id) {
  for (let i = 0; i < items.length; i++) {
      if (items[i].id == id) {
          items.splice(i,1);
      }
  }
}

function edit (id) {
    
};

function complete (id) {
    
    for (let i = 0; i < items.length; i++) {
        if (items[i].id == id) {
            items[i].complete = true;
        }
    }
};

function des() {
    items = items.sort(function(a, b) {
        return a.date  - b.date;
    });
};


function asc() {
    items = items.sort(function(a, b) {
        return b.date - a.date;
      });
};


function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden', 'true');
    modal.setAttribute('style', 'display: none');
    const modalBackdrops = document.getElementsByClassName('modal-backdrop');
    document.body.removeChild(modalBackdrops[0]);
};

document.querySelector("#addTask").onclick = () => {
    const id = uuidv4();
    add(id);
    list();
    document.querySelector('#delete-' + id).onclick = () => {
        remove(id);
        list(); 
    };  
    document.querySelector('#edit-' + id).onclick = () => {
        edit(id); 
        list(); 
    };  
    document.querySelector('#complete-' + id).onclick = () => {
        complete(id); 
        list(); 
    };  
  
    document.querySelector('#des').onclick = () => {
        des();
        list(); 
    };
    document.querySelector('#asc').onclick = () => {
        asc();
        list(); 
    };
    closeModal("exampleModal");
};

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/aa7a31f950.js" crossorigin="anonymous"></script>
    
    <style>
    .wrapper {
        min-height: calc(100vh - 15px);
        margin: 15px auto 0;
    }
    </style>
    <title>LogicPart</title>
</head>
<body>
    <div class="container-fluid wrapper">
        <nav class="navbar navbar-light bg-light">
            <h1>MyToDoList</h1>
            <div class="d-flex">
                <button type="button" class="btn btn-primary mx-2" id="des"><i class="fas fa-sort-numeric-up-alt"></i></button>
                <button type="button" class="btn btn-primary" id="asc"><i class="fas fa-sort-numeric-up"></i></button>
            </div>
            <div class="d-flex">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-plus"></i>
                    Add task
                </button>
                <div class="dropdown ml-2">
                    <button class="btn btn-primary" type="button" id="dropdownMenuSettings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-cog"></i>
                    </button>
                    <div class="dropdown-menu p-2 dropdown-menu-right" aria-labelledby="dropdownMenuSettings">
                        You should add settings here
                    </div>
                </div>
            </div>
        </nav>
        <div class="row justify-content-center">
            <div class="col-10">
                <h3 class="my-2">ToDo</h3>
                <ul class="list-group flex-wrap justify-content-between" id="currentTasks">
                    
                </ul>
                <hr>
                <h3 class="my-2">Comleted</h3>
                <ul class="list-group flex-wrap justify-content-between" id="completedTasks">
                </ul>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group row">
                            <label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputTitle" placeholder="Title" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputText" class="col-sm-2 col-form-label">Text</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputText" placeholder="Text" required>
                            </div>
                        </div>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Priority</legend>
                                <div class="col-sm-10">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gridRadios" id="Low" value="Low" required>
                                        <label class="form-check-label" for="Low">
                                            Low
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gridRadios" id="Medium" value="Medium">
                                        <label class="form-check-label" for="Medium">
                                            Medium
                                        </label>
                                    </div>
                                    <div class="form-check disabled">
                                        <input class="form-check-input" type="radio" name="gridRadios" id="High" value="High">
                                        <label class="form-check-label" for="High">
                                            High
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <div class="form-group row">
                            <div class="col-sm-12 text-center">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="addTask" >Add task</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="test2.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>