Select2 jQuery control displays two drop-down lists?

I am using select2 to display a list on a Node.js web page. When the page displays, I see a drop-down list and a SPAN with the currently selected value. However, the following odd behavior is occurring:

• The SPAN element also displays a drop-down list of choices if clicked inside, not just the drop-down list box (see picture).
• The "select2:selected" event handler I attach to the SELECT element that becomes the select2 instance only fires when I select an item from the drop-down list the SPAN displays, not when I select an item from the primary drop-down list. (See code snippet below).

I find it immediately suspicious how convoluted and nested the SPAN element rendered by select2 is, especially that last child SPAN element with the dropdown-wrapper class attached to it. But i have no idea what it is I am doing that could result in this output by the select2 control. (See the ELEMENTS RENDERED BY SELECT2 section below).

Why am I getting this weird "double" drop-down list behavior and strange event handler firing situation? I just want a single drop-down box that updates a SPAN when the selected element changes, and fires the "select2:selected" event. I don't want the associatd SPAN element to do anything but display the currently selected value.

SCREEN SHOT WITH PRIMARY DROP-DOWN LIST SHOWING:

SCREEN SHOT WITH SECONDARY UNWANTED DROP-DOWN LIST SHOWING (span element):

ELEMENTS RENDERED BY SELECT2 (from the Chrome DevTools Elements screen)

<td id="asset-symbol-td">
    <select id="crypto-symbol-select2-div" class="crypto-symbol-select2 select2-hidden-accessible" data-select2-id="select2-data-crypto-symbol-select2-div" tabindex="-1" aria-hidden="true">
        <option value="007" data-select2-id="select2-data-2-mnlq">007 - 007 coin</option>
        ... // Deleted other option rows for brevity's sake.
    </select>
    <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="select2-data-1-0hvk" style="width: 22px;">
        <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-crypto-symbol-select2-div-container" aria-controls="select2-crypto-symbol-select2-div-container">
                <span class="select2-selection__rendered" id="select2-crypto-symbol-select2-div-container" role="textbox" aria-readonly="true" title="NEO - NEO">
                    NEO - NEO
                </span>
                <span class="select2-selection__arrow" role="presentation">
                        <b role="presentation"></b>
                </span>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true">
        </span>
    </span>

</td>

JAVASCRIPT CODE TO ATTACH "selected" HANDLER

// Bind the "selected" event to the the funcChange function
//  we were passed during construction.  Pass it the value selected.
$('#crypto-symbol-select2-div').on("select2:select", function (e) {
    const valSelected = $(self.select2DivId).select2().val();
self.funcOnChange(valSelected);
});

JADE (HTML) FOR THE "select" ELEMENT

select(id="crypto-symbol-select2-div" class="crypto-symbol-select2")