XF 2.0 Problem with select2 on page

[canina]

Hello everyone.
I'm trying to embed a select2 object on the page.
For some reason when the page runs, the object does not initialize (shown as in the image).



This is the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

    <script>
        XF.runselect = XF.Element.newHandler({
          
            init: function()
            {
                this.run();
            },     

            run: function()
            {
                $('.js-example-basic-multiple').select2({
                    tags: true,
                    tokenSeparators: [',', ' '],
                });
            },
        });
      
        XF.Element.register('runselect', 'XF.runselect');

    </script>
  
    <xf:select data-xf-init="runselect" style="width: 80%;"  id="listnickstoshare" class="js-example-basic-multiple" name="states[]" multiple="multiple">
      
        <xf:option value="1">
            orange
        </xf:option>
        <xf:option value="2">
            apple
        </xf:option>
      
    </xf:select>

Maybe the problem he is having with jquery is as @Brogan wrote here?

So what is the solution?

Thanks in advance.