How can I automatically organize dynamically created divs by their ID (javascript)?

Question

I am building a to do app and one of the functions is that the user can input a number for the tasks "priority" and that will determine where the task is displayed in relation with the others. So if a user puts the priority (ID) as 1, it should display first and so on but if the user deletes say #1, then adds it back in later after many others have been added, it should still be at the top as it's ID is "1".

Solution approaches I have tried -

1 - Creating an array of the containers children, using.sort() on that array then.forEach() to append it to the tasksBoxesWrapper. Doing this either does not produce an error message but doesn't work, or, I receive an error that I'm trying to append a non node element.

This is the only method I've been able to find that doesn't use jquery. Any help is much appreciated.

submitNewTaskbtn.addEventListener("click", function () {
  for (let i = 0; i < 1; i++) {
    const deleteBtn = document.createElement("button");
    const taskWrapper = document.createElement("div");
    const taskName = document.createElement("div");
    const taskDescription = document.createElement("div");
    const dueDate = document.createElement("div");
    const tasksBoxesWrapper = document.getElementById("tasksBoxesWrapper");
    //Appends the individual tasks box to the main container and adds a clas

    if (taskTitleInput.value === "") {
      alert("no");
    } else {
      taskWrapper.id = priorityInput.value;

      taskWrapper.className = "taskBoxes";
      taskWrapper.appendChild(deleteBtn);
      deleteBtn.textContent = "X";
      deleteBtn.className = "deleteBtn";
      deleteBtn.addEventListener("click", function () {
        taskWrapper.remove();
      });
      taskWrapper.appendChild(taskName);
      taskName.textContent = taskTitleInput.value;
      taskName.className = "taskBoxName";
      hide(taskForm);
    }

    if (descriptionInput.value === "") {
      taskDescription.className = "formHide";
    } else {
      taskWrapper.appendChild(taskDescription);
      taskDescription.textContent = descriptionInput.value;
      taskDescription.className = "taskBoxDescription";
    }

    if (dueDateInput.value === "") {
      dueDate.className = "formHide";
    } else {
      taskWrapper.appendChild(dueDate);
      dueDate.textContent = dueDateInput.value;
      dueDate.className = "taskDueBox";
    }
  }

  taskForm.className = "formHide";
});