JSFiddle - React, Tailwind, and code Playground

HTML

<header data-role="header">
  <h1>To Do List</h1>
  <a href="#">Home</a>
</header>

<div role="main" class="todo-     container">
  <div class="input">
    <input type="text" class="note" placeholder="Input new note..">
    <button id="addButton">Add</button>
  </div>

  <ul class="todo-list">

  </ul>

JavaScript

$('#addButton').click(function() {
     var task = $(".note").val();
     $(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButton">Edit</button>   </div></li>`);
     $(".note").val("");
   });
   $(document).on('click', '.deleteButton', function() {
     $(this).parent().parent().remove();

   });
   $(document).on('dblclick', '.task', function() {
     var task = $(this).text();
     $(this).text('');
     $(this).append(`<input type="text" value="${task}" />`);
   });

   $(document).on('click', '.editButton', function() {
      var task = $(this).parents().siblings('span').children('input').val();
			$(this).parents().siblings('span').remove('input');
      $(this).parents().siblings('span').text(task);
   });