Use two TomSelect in a same page

[adminBrandit]

Hi!!

I'm working with TALL: (Laravel 8, Livewire and Tailwind), I can use one TomSelect instance, and all works fine (IMPORTANT: use a

tag).

But, when I need use two TomSelect objects, only one works.

I use some like this ($nombre and $nombreJS are unique):

<div class="mt-1"> <div wire:ignore> <select wire:model.lazy="{{ $nombre }}" id="{{ $nombreJS }}" {{ ($multiple ? "multiple" : "") }} name="{{ $nombre }}" class="w-full tom-select"> </select> </div> </div>

new TomSelect("#{{ $nombreJS }}", { valueField: 'id', searchField: 'title', options: [ {id: 1, title: 'DIY', url: 'https://diy.org'}, {id: 2, title: 'Google', url: 'http://google.com'}, {id: 3, title: 'Yahoo', url: 'http://yahoo.com'}, ], render: { option: function(data, escape) { return '<div>' + '<span class="title">' + escape(data.title) + '</span>' + '<span class="url">' + escape(data.url) + '</span>' + '</div>'; }, item: function(data, escape) { return '<div title="' + escape(data.url) + '">' + escape(data.title) + '</div>'; } } });

Thanks!!

[t-prod]

Same problem and I don't know how I can do. I'm thinking about changing this component.
I try to make a classe with this code but same result :

window.addEventListener('lineAdded', (e) => {
        document.querySelectorAll('.select-results').forEach((el)=>{
            new TomSelect(el,settings);
            console.log(el);
        });
    })

[oyejorge]

Working example: https://jsfiddle.net/0kt5vhws/