将编辑按钮添加到 JavaScript / JQuery 中添加的任务列表项？

Question

我尝试了多种方法来编辑添加到任务列表中的任务，但代码不起作用。 任何线索错误在哪里，或者是否有更简单的方法来添加编辑任务按钮？ 我想避免简单地将所有列表项设为 contenteditable=true，而是希望能够先单击编辑按钮进行编辑。 当我尝试向 $todoList 行上的“//call append 方法”添加一个编辑按钮时，该按钮用作完成/从列表中删除按钮，而不是用作更改列表项的编辑按钮。

var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $editButton = $(".btn-primary");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");

//Take Text Input and Add <li> to To Do List
 $addButton.on("click", function(){
  
  //Creating object Variables 
  var $sort = $(".sort").val();
  var $newTask = $(".newTask").val();
  var $taskDescr = $(".taskDescr").val();
  var $taskDate = $(".taskDate").val();
 // var $category= $(".category").val();
  var $category= $("input[type='radio'][name='category']:checked").val();
  //var $importance = $("input[type='checkbox'][name='importance']:checked").val();
  var $importance = $('<input type="checkbox" name="importance"/>').val();
  var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + "  "; 
  var $todoList = $(".uncompleted");
  
   //call append method on $todoList
   
  $todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
  
  //add styles to button added to DOM by append  
  var $span = $(".todo button span");
  var $button = $(".todo button");
  $button.addClass("btn btn-success");
  $span.addClass("glyphicon glyphicon-ok"); 
  $("input").val("");
   
 })

//Edit existing task
 //var id_counter
 //var $task = $("<tr class='taskList' id='"+ id_counter +"'>")

 //function myEdit(){
 //}

 $(function(){
$(document).on('click','.my-row .col-a3',function(){
    let editable = $(this).prev('.col-a2').attr('contenteditable');
    if(editable){
        $(this).text('Edit');
        $('.col-a2').css({'border': ''});
        $(this).prev('.col-a2').removeAttr('contenteditable');
     }
      else{
        $(this).text('Save');
        $('.col-a2').css({'border': '1px solid'});
        $(this).prev('.col-a2').attr('contenteditable','true');
    }
})
});

<div class="list-wrap" contenteditable="false"> 
    <div class="list-inner-wrap">
      <h2 class="title">ToDo List</h2>
      <h3 class="title">Add Task</h2>
      <!--<h4>Task Name</h4>-->
      
      <label for="sort">Sort Order:</label><input type="text" class="sort" name="sort" id="sort" value="" placeholder="A,B,C,etc.">
      <br>
      <label for="task-name">Task Name:</label><input type="text" class="newTask" name="task-name" id="task-name" value="" placeholder="My task...">
      <br>
      
    </form>
      
  <br>

  <button class="btn btn-primary">
    <span class="glyphicon glyphicon-plus"> Add</span>
  </button>

  <!--Edit task button-->

    <button class="edit" onclick="myEdit()">Edit Task</button>
    <p id="demoedit"></p>
  

      <br>

      <div class="my-row">
      <h3 class="title">To Do</h2>
        <h6><i>Click task item to edit or modify</i></h6>

        <!--Change color of editable task -->
        <div id='div' contenteditable='false' oninput='change()'>

        

      <ul class="uncompleted" contenteditable="false" id="id01">

        <div class="col-a2">
        <li>Need to be completed task 
        <button class="btn btn-success" a href="#" onclick="allUsersDiv()">
        <span class="glyphicon glyphicon-ok"> Done</span>
          </button>

          <button class="btn btn-danger">
          <span class="glyphicon glyphicon-remove"> Remove</span></button>

         <!-- <div class="col-a3"><button>Edit</button>
          </div>-->
          <br>
        
        </li></ul></div></div>
        </div></div></div>

        <br><br><br><br><br><br><br><br><br>

      <h3 class="title">Completed Tasks</h2>

        
        <ul class="completed" contenteditable="false">
        <li>Completed Task<button class="btn btn-danger">
        <span class="glyphicon glyphicon-remove"> Remove</span>
      </button></li>
      </ul>
    </div>

<br>
<br>