پابلیک کردن یک متغیر در js

سلام من توی یه فانکشن از insertAdjacentHTML استفاده میکنم
مشکل اینجاس که من از یه کتابخونه دارم استفاده میکنم و باید المنت با آیدی color-picker رو بهش بدم

ولی چون این المنت توی فانکشن فقط تعریف شده توی کتابخونه شناسایی نمیشه

اگه کسی میدونه مشکل از چیه کمک کنه ؛ ممنون

addBtn.addEventListener('click', () => {
    newNote();
})

let newNote = () => {

    let newNote = document.createElement('div');
    newNote.classList.add('note');
    newNote.insertAdjacentHTML('beforeend', `
    <div class="note-tools">
        <div>
            <a href="#" id="color-picker">
                <i class='far fa-palette'></i>
            </a>
        </div>
        <div>
            <a href="#" id="edit">
                <i class='fas fa-pen'></i>
            </a>
            <a href="#" id="delete">
                <i class='fas fa-trash'></i>
            </a>
        </div>
        </div>
    <div class="note-text">
        <textarea name="" id=""></textarea>
    </div>
    `);

}