Узел не может иметь более одного родителя в DOM; как это обойти?

Question

Скажем, я создаю приложение Todo с функцией папок (я могу хранить Todos в папках).

Итак, у меня есть класс:

class Folder{
    constructor(){
        this.title = "new folder";
        this.element = document.createElement("li"); // element that will show up in the Folder menu bar
        this.dropdownElement = document.createElement("li"); // element that will show up in EACH Todo box
     }
}

Итак, каждый раз, когда я создаю новый Folder, я хочу добавить dropdownElement внутри ВСЕХ элементов Todo, которые существуют в настоящее время, чтобы пользователь мог выбрать, в какую папку перейти Todo.

class Todo{
    constructor(){
        this.element = document.createElement("div"); // the todo box
    }

    static addNewFolderToDropdown(dropdownFolderElement){ 
        for(let todo of Todo.instances){ // loops through all the Todos the user has
            this.element.appendChild(dropdownFolderElement);
        }
    }
}

ОДНАКО, вот проблема : dropdownFolderElement может иметь только ОДИН родительский узел, поэтому он не может быть в каждом блоке Todo, только один.

Итак, я попробовал это:

    static addNewFolderToDropdown(dropdownFolderElement){
        for(let todo of Todo.instances){
            const clone = dropdownFolderElement.cloneNode(true);
            this.element.appendChild(clone);
        }
    }

Это прекрасно работает! Однако что, если пользователь изменит название Folder? Или что, если пользователь удалит Folder? Как клон узнает о таких изменениях?

Я пытался найти простое решение, но я просто не могу найти способ.