<Script> for select2 on slide over

[Arkantium]

I try to add select2 on my wireelementpro but it does not load I have include jquery / select 2 lib in my app.blade How to include script directily on wire element slide-over ?

<x-wire-elements-pro::bootstrap.slide-over on-submit="save">
    <div class="card overflow-hidden rounded-0 mt-0 mb-0 pb-0" style="padding-top:5.3rem; height: calc(100vh - 0.9rem);">
        <div class="card-header bg-success text-white rounded-0">
            <h5 class="card-title mb-0">Ajouter des groupes à l'utilisateur</h5>
        </div>
        <!-- Corps -->
        <div class="card-body">
            <h5 class="text-success">Utilisateurs: <strong class="text-primary">Benjamin Versini</strong></h5>
            <hr>
            <h5 class="text-success">Ajouter des groupes:</h5>

            <div wire:ignore>
                <select class="form-select" id="taskSelect" multiple="multiple" wire:model.live="selectedGroups">
                    @foreach($allGroups as $group)
                        <option id="{{ $group['distinguishedname'][0] }}">
                            {{$group['name'][0] ?? 'Undefined Group'}}
                        </option>
                    @endforeach
                </select>
            </div>

            <hr>
            <h5 class="text-secondary">Groupes Actuel:</h5>
            <!-- Tableau des groupes -->
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Nom du Groupe</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($userGroups->isNotEmpty())
                        @foreach ($userGroups as $group)
                            <tr>
                                <td>{{ $group['name'][0] ?? 'Unnamed Group'}}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr><td colspan="2">Aucun groupe actuel.</td></tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pied de page -->
        <div class="card-footer bg-light border-top-0">
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-outline-secondary me-2" wire:click="$emit('closeSlideOver')">Annuler</button>
                <button type="button" class="btn btn-primary" wire:click="addSelectedGroups">Ajouter les groupes</button>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#taskSelect').select2();

            $('#taskSelect').on('change', function (e) {
            @this.set('selectedTasks', $(this).val());
            });
        });
    </script>

</x-wire-elements-pro::bootstrap.slide-over>

[PhiloNL]

Try to use Alpine :)

<div x-data="init() { 
$('#taskSelect').select2(); 

$('#taskSelect').on('change', function (e) {
    @this.set('selectedTasks', $(this).val());
});
}">