同一页面多次初始化JavaScript组件时实例属性被覆盖的问题咨询

我现在正尝试把JavaScript功能封装成组件，目前的简化代码如下：

index.html #

<div class="modal" data-component="cmpModal" id="addSetModal">Modal 1</div>
<div class="modal" data-component="cmpModal" id="workoutDateModal">Modal 2</div>

app.js #

import cmpModal from "./components/cmp-modal";

export const componentScripts = {
    cmpModal: cmpModal,
}

document.addEventListener('DOMContentLoaded', () =>
{
    // 查找所有带有component属性的元素
    const componentElements = document.querySelectorAll('[data-component]');

    // 遍历所有组件元素
    for (const el of componentElements) {
        let componentName = el.getAttribute('data-component');

        // 获取匹配组件的脚本
        let componentScript = componentScripts[componentName];

        // 如果脚本存在，执行初始化
        if (typeof componentScript != 'undefined') {
            componentScript.init(el);
        }
    }
});

cmp-modal.js #

const cmpModal = {
    component: null,

    /**
     * 初始化组件
     * @param element
     */
    init: function (element)
    {
        const _ = this;
        _.component = element;
        console.log(_);
    }
}

export default cmpModal;

我遇到的问题出在cmp-modal.js文件里。页面上有两个模态框，我原本期望控制台会打印两次组件实例，每个实例对应的ID应该不同——折叠日志的时候看起来是对的：

但当我展开日志后，发现两个实例的ID都变成了最后一个模态框的ID，其他属性也是如此，两个日志都只反映最后一个模态框的属性：

我哪里做错了？该怎么让每个模态框对象实例都只对应自己的那个模态框，保持隔离呢？

备注：内容来源于stack exchange，提问作者BobbyP