Uncaught TypeError: Невозможно прочитать свойство 'parentNode' со значением NULL при попытке изменить цвет BG

Question

Примечание. В настоящее время я изучаю JS и пытаюсь создать приложение для создания потоковой диаграммы.

Каждый элемент (прямоугольник, круг, овал) имеет кнопку редактирования с классом «.edit», видимую только при наведении на элемент ( см. значок карандаша). Каждый элемент имеет уникальный идентификатор.

Когда нажата кнопка карандаша с классом .edit, она поднимает боковую панель меню, где цвет фона элемента может быть изменен с помощью библиотека Пикра. Ниже описано, как я слушаю клики и меняю цвет фона элемента.

 $("document").ready(() => {
        $(".edit").click(function() {
            let id = this.id;
            document.getElementById("right-bar").style.width = "240px";
            document.getElementById("top-bar-right").style.width = "240px";
            document.getElementById("canvas").style.right = "17%";

            changeBGcolor("element" + id);
        })
    });

function changeBGcolor(something) {

const backgroundPickr = Pickr.create({
    el: '.bg-color-picker',
    theme: 'classic',
    default: $("#" + something).css("background-color"),

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
    ],

    components: {

        preview: true,

        interaction: {
            hex: true,
            rgba: true,
            input: true,
            save: true
        }
    }
});

backgroundPickr.on('save', (color) => {

    $(`#${something}`).css("background-color", color.toHEXA().toString());
    //colorBG = color.toHEXA().toString();
})

};

<!-- Here is the HTML bit --> 
 <div id="right-bar">
    <div class="list-group customizations">
        <a href="#" class="list-group-item list-group-item-action custom-options">
            Element Background Color 
            <div class="bg-picker bg-color-change">
                <div class="bg-color-picker"></div>
            </div>
        </a>
    </div>
 </div>

Когда я нажимаю кнопку карандаша ('.edit') в первый раз, правая полоса поднимается вверх, и я могу изменить фон элемента цвет просто отлично. Однако проблема, с которой я сталкиваюсь сейчас, заключается в том, что независимо от того, на каком значке карандаша элемента я нажимаю после первоначального изменения цвета, любой новый выбранный цвет применяется только к исходному элементу (тому, чью кнопку карандаша я впервые щелкнул и произвел изменение цвета). к). Ниже приведен снимок экрана с ошибками, возникающими при нажатии кнопки карандаша других элементов после первоначального изменения цвета.

PS Прошу прощения за то, что не суммировал мою проблему лучше. Английский sh не является моим родным языком, и это всего лишь второй вопрос, который я задал в отношении переполнения стека.