*Expected behavior*I am dynamically created an anchor tag in javascript for a list group

           var a = document.createElement('a');
            a.className = "list-group-item list-group-item-action";
            a.id = 'list_vehicle' + vehicle_id + '_list';
            a.setAttribute("data-mdb-toggle","list");
            a.href = '#list-vehicle' + vehicle_id;
            a.setAttribute("role","tab");
            a.innerText = 'Sample Vehicle ' + vehicle_id;
            document.getElementById("vehicle_list").appendChild(a);

            const tabTrigger = new mdb.Tab(a);
            a.addEventListener('click', (event) => {
            event.preventDefault()
            tabTrigger.show()
        });

Everything appears to be created fine. When i go to click the list item anchor on the page i get the following error:

Getting the following error

bootstrap:2 Uncaught TypeError: Illegal invocation
    at Object.find (bootstrap:2)
    at bootstrap:2
    at e (bootstrap:2)
    at Object.trigger (bootstrap:2)
    at i (bootstrap:2)
    at r.value (bootstrap:2)
    at HTMLAnchorElement. (bootstrap:2)
    at HTMLDocument.e (bootstrap:2)
find @ bootstrap:2
(anonymous) @ bootstrap:2
e @ bootstrap:2
trigger @ bootstrap:2
i @ bootstrap:2
value @ bootstrap:2
(anonymous) @ bootstrap:2
e @ bootstrap:2

Which brings me to this line of code: var installedModules = {};

And the list item anchor never shows the associated list item content.

I've tried several different ways of dynamically creating the element and then registering it, all leading to the same error.