Как создать динамические несколько заметок с помощью сценария Java и SignalR

Question

Я пытаюсь интегрировать модуль заметок, который я нашел на codepen.io (Нажмите здесь: https://codepen.io/raymaghi/pen/PgBzPb?&page=1) в моем веб-приложении mvc на основе SignalR. Проблема в том, что я хочу добавить несколько похожих заметок, каждая из которых имеетта же функциональность, что и у другого, т.е. изменение цвета, прозрачности, удаление, редактирование текста и т. д. Я добавил кнопку добавления, которая при нажатии добавляет новую заметку путем клонирования элемента заметки.

<div id="create">+</div>
<div class="container" id="container">
    <div id="oneNote">
        <div class="sticky-header">
            <span id="lock-icon"><i class="fas fa-lock-open"></i></span>
            <span id='title'>New Note</span>
            <span><i class="fas fa-times"></i></span>
            <span id="toggle-settings" ><i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="sticky-body">
            <textarea name="txtNote" id="txtNote" cols="30" rows="10"></textarea>
        </div>
        <div class="settings" id="settings" >
            <p id="delete-note"><i class="fas fa-trash-alt"></i>Delete Note</p>
            <div class="color">
                <p><i class="fas fa-paint-roller"></i>Color<i class="fas fa-chevron-right"></i></p>
                <div class="color-choice-container">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#" class="active"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="opacity">
                <p>opacity<i class="fas fa-chevron-right"></i></p>
                <div class="opacity-content">
                    <p data-opacity='1'>100%</p>
                    <p data-opacity='0.9'>90%</p>
                    <p data-opacity='0.8'>80%</p>
                    <p data-opacity='0.7'>70%</p>
                    <p data-opacity='0.6'>60%</p>
                    <p data-opacity='0.5'>50%</p>
                    <p data-opacity='0.4'>40%</p>
                    <p data-opacity='0.3'>30%</p>
                    <p data-opacity='0.2'>20%</p>
                    <p data-opacity='0.1'>10%</p>
                </div>
            </div>
            <p id="edit-title">Edit title</p>
            <p id="lock-note-button"><i class="fas fa-lock"></i>Lock note</p>
        </div>
    </div>
</div>

Когда создаетсянажата кнопка, я дублирую элемент заметки и успешно создаю новую заметку:

chat.client.addNoteToPage = function (title, noteText) {
                // Add the message to the page.
                duplicate();
               // var newNote = '<div class="sticky-header"><span id="lock-icon"><i class="fas fa-lock-open"></i></span ><span id="title">New Note</span><span><i class="fas fa-times"></i></span><span id="toggle-settings"><i class="fas fa-chevron-down"></i></span></div ><div class="sticky-body"><textarea name="txtNote" id="txtNote" cols="30" rows="10"></textarea></div>';
               // $('#oneNote').append(newNote);
            };

function duplicate() {
            var original = document.getElementById('oneNote');
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "oneNote" + ++i; // there can only be one element with an ID
            //clone.onclick = duplicate; // event handlers are not cloned
            $('#create').before(clone);
        }

Но все новые заметки добавляются перед кнопкой создания и не могут быть перетащены / перемещены. Плюс их настройки изменения цвета,Непрозрачность и т. д. не работают, только их содержимое может быть изменено. Я полагаю, это потому, что java-скрипт, используемый для манипулирования заметками, выполняется с помощью идентификатора, который должен быть уникальным. Как показано ниже:

 var menu_bar = document.getElementById("toggle-settings");
            var settings = document.getElementById("settings");
            var sticky_header = document.querySelector(".sticky-header");
            var edit_title = document.getElementById("edit-title");
            var edit_title_box = document.querySelector(".edit-title-box");
            var overlay = document.querySelector(".overlay");
            var title = document.getElementById("title");
            var new_title = document.getElementById("new-title");
            var ok_button = document.getElementById("ok");
            var cancel_button = document.getElementById("cancel");
            var lock_note_button = document.getElementById("lock-note-button");
            var lock_note_icon = document.getElementById("lock-icon");
            var textarea = document.querySelector("textarea");
            var delete_note = document.getElementById("delete-note");
            var delete_box = document.querySelector(".delete-box");
            var yes_button = document.getElementById("yes");
            var no_button = document.getElementById("no");
            var container = document.getElementById("container");
            var opacity_content = document.querySelectorAll(".opacity-content>p");
            var color_container_colors = document.querySelectorAll(
                ".color-choice-container a"
            );
            var color_container = document.querySelector(".color-choice-container");
            var active = document.querySelector(".active");
            var notice = document.querySelector(".notice");
            var opacityArray = [1, 1];
            var colorObject = {
                old: {
                    header: "rgb(206, 209, 38)",
                    body: "rgb(236, 239, 68)"
                },
                new: {
                    header: "rgb(206, 209, 38)",
                    body: "rgb(236, 239, 68)"
                }
            };

            menu_bar.addEventListener("click", function () {
                var settings_display_prop = window.getComputedStyle(settings).display;
                if (settings_display_prop == "none") {
                    settings.style.display = "block";
                } else {
                    settings.style.display = "none";
                }
            });

            edit_title.addEventListener("click", function () {
                overlay.style.transform = "scale(1)";
                edit_title_box.classList.add("show");
                settings.style.display = "none";
            });

            cancel_button.addEventListener("click", function () {
                overlay.style.transform = "scale(0)";
                edit_title_box.classList.remove("show");
            });

            ok_button.addEventListener("click", function () {
                overlay.style.transform = "scale(0)";
                if (new_title.value.length > 0) {
                    title.innerHTML = new_title.value;
                }
                edit_title_box.classList.remove("show");
            });

            lock_note_button.addEventListener("click", function () {
                var lock_icon = lock_note_icon.firstElementChild;
                if (lock_icon.classList.contains("fa-lock-open")) {
                    lock_icon.classList.remove("fa-lock-open");
                    lock_icon.classList.add("fa-lock");
                    textarea.disabled = true;
                    this.innerHTML = '<i class="fas fa-lock"></i> Unlock note';
                } else {
                    lock_icon.classList.remove("fa-lock");
                    lock_icon.classList.add("fa-lock-open");
                    textarea.disabled = false;
                    this.innerHTML = '<i class="fas fa-lock"></i> Lock note';
                }
                settings.style.display = "none";
            });

            textarea.addEventListener("click", function () {
                settings.style.display = "none";
            });

            delete_note.addEventListener("click", function () {
                overlay.style.transform = "scale(1)";
                delete_box.classList.add("show");
                settings.style.display = "none";
            });

            yes_button.addEventListener("click", function () {
                title.innerHTML = "New Note";
                textarea.value = "";
                delete_box.classList.remove("show");
                overlay.style.transform = "scale(0)";
            });

            no_button.addEventListener("click", function () {
                delete_box.classList.remove("show");
                overlay.style.transform = "scale(0)";
            });

            var isdown;
            var containerOffset = [];
            container.addEventListener(
                "mousedown",
                function (e) {
                    isdown = true;
                    containerOffset = [e.pageX - this.offsetLeft, e.pageY - this.offsetTop];
                    this.style.opacity = opacityArray[1];
                },
                true
            );

            document.addEventListener(
                "mouseup",
                function () {
                    isdown = false;
                },
                true
            );

            document.addEventListener(
                "mousemove",
                function (e) {
                    e.preventDefault();
                    if (isdown == true) {
                        container.style.top = e.clientY - containerOffset[1] + "px";
                        container.style.left = e.clientX - containerOffset[0] + "px";
                    }
                },
                true
            );

            opacity_content.forEach(c => {
                c.addEventListener("click", function () {
                    opacityArray[0] = this.getAttribute("data-opacity");
                    container.style.opacity = opacityArray[0];
                    settings.style.display = "none";
                });
            });

            document.addEventListener("click", function (e) {
                if (!container.contains(e.target)) {
                    settings.style.display = "none";
                    container.style.opacity = opacityArray[0];
                }
            });

            color_container_colors.forEach(c => {
                c.addEventListener("mouseover", function () {
                    var color = window.getComputedStyle(c).backgroundColor;
                    var textareaColor = lighterShade(color);
                    colorObject.new.header = color;
                    colorObject.new.body = textareaColor;
                    sticky_header.style.backgroundColor = color;
                    textarea.style.backgroundColor = textareaColor;
                });
                c.addEventListener("mouseout", function () {
                    sticky_header.style.backgroundColor = colorObject.old.header;
                    textarea.style.backgroundColor = colorObject.old.body;
                });
                c.addEventListener("click", function () {
                    colorObject.old.header = colorObject.new.header;
                    colorObject.old.body = colorObject.new.body;
                    settings.style.display = "none";
                    var currActive = document.querySelector(".active");
                    currActive.removeChild(currActive.childNodes[0]);
                    currActive.classList.remove("active");
                    c.classList.add("active");
                    c.innerHTML = '<i class="fas fa-check"></i>';
                });
            });

            function lighterShade(v) {
                var colorValue = v
                    .split("")
                    .filter(c => !isNaN(c))
                    .join("")
                    .split(" ");
                colorValue = colorValue.map(c => {
                    var newNumber = parseInt(c) + 30;
                    if (newNumber <= 255) return newNumber;
                    else return 255;
                });
                return `rgb(${colorValue[0]},${colorValue[1]},${colorValue[2]})`;
            }
            active.innerHTML = '<i class="fas fa-check"></i>';

            setTimeout(function () {
                notice.style.display = 'none';
            }, 10000)

Чтовозможно я могу сделать, чтобы создать новую заметку, когда нажата кнопка создания, которая имеет все функциональные возможности, которые должна иметь заметка, т.е.изменить цвет, непрозрачность, перетаскивание и т. д.