Как с помощью JS создать менеджер задач?

$("#taskAddButton").click(function() {// нахожу кнопку и добавляю к нему эвент на клик
  $("#taskList").append(`<div class="card mt-2"><div class="card-header d-flex"><div class="card-title"><span>${$("#taskTitle").val()}</span></div><button type="button" class="close d-flex ml-auto" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="card-body"><span>${$("#taskDescription").val()}</span></div></div>`);
  //append = вставляет в элемент, над которым он вызван другой эл-нт (скобках)
  //$("#..") - поиск элемента по id
  //$("#..").val - получения значения для input
});

$("#taskList").on("click", ".close", function() {// нахожу крестик и навешиваю на него событие по клику. Такой способ потому что он динамический.
  $(this).closest(".card").remove(); // remove - удаляет выбранный эл-нт
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-6" id="taskList">
      
    </div>
    <div class="col-6" id="addForm">
      <form onsubmit="return false;">
        <div class="form-group">
          <label for="taskTitle">Название</label>
          <input type="text" class="form-control" id="taskTitle" aria-describedby="taskTitleHelp">
          <small id="taskTitleHelp" class="form-text text-muted">Введите название задания.</small>
        </div>
        <div class="form-group">
          <label for="taskDescription">Описание</label>
          <textarea rows="5" cols="45" id="taskDescription" name="text" class="form-control"></textarea>
        </div>
        <button class="btn btn-primary btn-block" id="taskAddButton">Добавить</button>
      </form>
    </div>
  </div>
</div>

// Контейнер в который мы будем помещать задачи.
const container = document.querySelector('#taskList');

// Поле - ввод, название задачи
const name = document.querySelector('#taskTitle');

// Поле - ввод, описание задачи
const description = document.querySelector('#taskDescription');

// Кнопка
const button = document.querySelector('#taskAddButton');

// Добавляем слушатель на кнопку, в качестве первого аргумента передаем событие, нам необходимо нажатие - click. В качестве второго аргумента мы передаем функцию (callback), по нажатию на кнопку мы будем возвращены в эту функцию.
button.addEventListener('click', function() {

	// Проверяем заполенны ли поля название и описание, если не заполнено хотя-бы одно поле - прерываем дальнейшее выполнение функции возвратив пустое значение.
	if (!name.value || !description.value) return;

	// Создаем элемент DIV
	const task = document.createElement('div');

	// Добавляем элементу DIV два класса: card и mt-2
	task.classList.add('card', 'mt-2');

	// Вставляем HTML код прямо в созданный элемент
	task.innerHTML = `
		<div class="card-header d-flex">
			<div class="card-title">
				<span>${name.value}</span>
			</div>
			<button type="button" class="close d-flex ml-auto" data-dismiss="modal" aria-label="Close">
			        <span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="card-body">
			<span>${description.value}</span>
		</div>
	`;

  	// Добавляем в контейнер созданный элемент
  	container.appendChild(task);

	// Обнуляем значения полей названия и описания
	name.value = '';
	description.value = '';
});


// Так как мы динамически добавляем элементы на страницу, нам необходимо за пределами самого элемента прослушать не было ли нажато крестика, который будет удалять задачу
container.addEventListener('click', function(e) {
	  // Проверяем на какой элемент мы кликнули, если мы кликнули на элемент который содержит в себе класс .close то удаляем весь родительский блок
	if (e.target.closest('.close'))
		// Поднимаемся до родительского контейнера и удаляем его полностью
		e.target.closest('.card').remove();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6" id="taskList">
	
    </div>
    <div class="col-6" id="addForm">
      <form onsubmit="return false;">
        <div class="form-group">
          <label for="taskTitle">Название</label>
          <input type="text" class="form-control" id="taskTitle" aria-describedby="taskTitleHelp">
          <small id="taskTitleHelp" class="form-text text-muted">Введите название задания.</small>
        </div>
        <div class="form-group">
          <label for="taskDescription">Описание</label>
          <textarea rows="5" cols="45" id="taskDescription" name="text" class="form-control"></textarea>
        </div>
        <button class="btn btn-primary btn-block" id="taskAddButton">Добавить</button>
      </form>
    </div>
  </div>
</div>