Dynamic, client-side update of drop down choices in Django admin?

My goal is to update the Pianos pane below with pianos belonging to the dynamically chosen Customer. The Piano panes are rendered by Django Admin's filter_horizontal option. I thought it might be simpler and more lightweight to use Javascript rather than django-autocomplete-lite (also used here with filters, which I didn't understand).

To that end, I found some excellent code which interfaces with SelectBox.js (SelectBox is used by Django) which I use to update the Pianos pane after fetching data dynamically from the server based on the entered Customer.

The remaining piece to be done is to query the server for the list of pianos based on the Customer chosen. I wrote an Ajax function triggered by change events on the Customer pane. However, I'm finding apparent conflicts (symptoms below) with other events registered on the parents of the "Customer" pane. The events expanded below are all Django's, attached to a parent, with the exception of the one indicated by red arrows.

Here's the relevant JS in the Django template:

    function updatePianoList() {
      alert("Step 1: Updating piano list");
      django.jQuery.ajax({
        // FIXME: hardwired url for testing
        url: "http://localhost:8000/giraffe/customersPianos/3",
        type: 'GET',
        dataType: 'text/plain'
      })
      .done (function(response, textStatus, jqXHR) {
          console.log(response.responseText);
          updateOptionsDisplay();
      })
      .fail (function(response, textStatus, errorThrown) {
          console.log("ReadyState: "+response.readyState+"\nstatus: "+response.status);
          console.log("ResponseText: "+response.responseText);
      });
    }
    
    function detectCustomerDropdownChange() {
       document.getElementById('select2-id_customer-container').addEventListener('change', updatePianoList);
    }

    window.addEventListener('load', detectCustomerDropdownChange);

The issues:

1. My addEventListener('change') (next to the bottom line) doesn't work.
2. Changing it to addEventListener('click') works most of the time, but intermittently fails with the getElementById() returning null as if it hasn't loaded yet, even though it's not called until the windows 'load' event has occurred.
3. My Ajax function gets called by one of the other Django listeners that I didn't define.
4. When my Ajax function does get called by my listener the "updateOptionsDisplay()" function inside the "done" leg doesn't execute, though "console.log()" does (this might be a separate question, or something dumb that will surface after I solve issues 1-3).

UPDATE: Issue #3 solved, see my comment. But the element in question isn't a normal input element, it's just a span with a role applied. The parents are similar.

<span class="select2-selection__rendered" id="select2-id_customer-container" role="textbox" aria-readonly="true" title="John Doe">John Doe</span>

Thinking maybe I need to capture the event directly from the browser before other elements get involved, I modified the addListener to turn on capture:

function detectCustomerDropdownChange() {
    document.getElementById('select2-id_customer-container').addEventListener('input', updatePianoList, {capture:true});
  }

But no success. So how to get the element to respond to events?

from Dynamic, client-side update of drop down choices in Django admin?