Expected behavior

I want to add chips when selecting on ajax autocomplete result.

Actual behavior

• Autocomplete OK
• Creating chips by adding HTML code is OK
• When try to delete a chip, the remove button not work

Resources (screenshots, code snippets etc.)

    const localisationAutoComplete = document.querySelector('#localisationFilter .localisationInput');
    const localisationAsyncFilter = async (query) => {
        var path = $(localisationAutoComplete).data('path');
        const url = path + `/${encodeURI(query)}`;
        const response = await fetch(url);
        const data = await response.json();
        return data.results;
    };
    new mdb.Autocomplete(localisationAutoComplete, {
        filter: localisationAsyncFilter,
        displayValue: (value) => value.name,
        threshold: 2,
        itemContent: (result) => {
            return `
  <div class="autocomplete-custom-item-content">
    <div class="autocomplete-custom-item-title">${result.name}</div>
    <div class="autocomplete-custom-item-subtitle">${result.type}</div>
  </div>
`;
        },
        customContent: `<div class="autocomplete-custom-content"></div>`,
    });
    localisationAutoComplete.addEventListener('itemSelect.mdb.autocomplete', (event) => {
        console.log(event.value);
        const localisationChips = document.querySelector('#localisationFilter .localisationChips');
        localisationChips.innerHTML += `<div class="chip " data-mdb-close="true">${event.value.name} <i class="close fas fa-times"></i></div>`;
    });

When i use the API as described in documentation:

    $('#chipsInputid').chips();

I got the error:

Uncaught TypeError: $(...).chips is not a function