bootstrap-select.js - javascript appending select options from CRM Web API failing

I have the oddest problem with some CRM web resources and bootstrap-select.js and hoping somebody can point out how blind I am being.

My situation is that I have a html web resource being shown as a modal using alert.js, within the modal I have a web api call to retrieve a list of users and then populate the options of a bootstrap-select.js select drop down. Everything is working, modal loads, web api call gets all users, iterates through and creates the options.....and now the weirdness (",)

Using Chrome Dev Tools - if i step through the code and let it complete all the options are visible and selectable (Woohoo!) - however if I let it run without stepping through the code it creates the options but they are not visible ????

    <script src="ClientGlobalContext.js.aspx" type="text/javascript" ></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

    <script>
    $.fn.selectpicker.Constructor.BootstrapVersion = '4.1';
    </script>

    <div class="form-group">
    <select class="selectpicker" multiple data-live-search="true" data-actions-box="false" title="Choose CLI Users" id="deptUserList" data-width="100%"></select>

    </div>
    </form>
    <script>
    $('#deptUserList').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    alert($('select').val());
    });
    </script>

    <script>

    $(document).ready(function () {
    debugger;
    var crmWindow = parent.Alert.getCrmWindow();

    getParentAccount();

    var submitButton = parent.Alert.$("#alertJs-tdDialogFooter button:first");
    submitButton.prop('disabled', false);

    function getParentAccount() {
    debugger;
    var crmWindow = parent.Alert.getCrmWindow();

    var parentAccountGUID = crmWindow.Xrm.Page.getAttribute("accountid").getValue()[0].id;
    var parentAccountGUID = parentAccountGUID.replace(/[{}]/g, "");
    var parentAccountName = crmWindow.Xrm.Page.getAttribute("accountid").getValue()[0].name;

    //document.getElementById('cliDept_Account').value = parentAccountName;

    var req = new XMLHttpRequest();
    req.open("GET", crmWindow.Xrm.Page.context.getClientUrl() + "/api/data/v8.1/cliusers?$select=accountid_value,cliuserid,departmentid_value,parentaccountid_value,username&$filter=parentaccountid_value eq " + parentAccountGUID + " and  departmentid_value eq null&$count=true", true);
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
    req.onreadystatechange = function () {
    if (this.readyState === 4) {
    req.onreadystatechange = null;
    if (this.status === 200) {
    var results = JSON.parse(this.response);
    var recordCount = results["@odata.count"];
    for (var i = 0; i < results.value.length; i++) {
    debugger;
    var accountid_value = results.value[i]["accountid_value"];
    var accountid_value_formatted = results.value[i]["accountid_value@OData.Community.Display.V1.FormattedValue"];
    var _accountid_value_lookuplogicalname = results.value[i]["accountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
    var cliuserid = results.value[i]["cliuserid"];
    var departmentid_value = results.value[i]["_departmentid_value"];
    var _departmentid_value_formatted = results.value[i]["_departmentid_value@OData.Community.Display.V1.FormattedValue"];
    var _departmentid_value_lookuplogicalname = results.value[i]["_departmentid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
    var _parentaccountid_value = results.value[i]["_parentaccountid_value"];
    var _parentaccountid_value_formatted = results.value[i]["_parentaccountid_value@OData.Community.Display.V1.FormattedValue"];
    var _parentaccountid_value_lookuplogicalname = results.value[i]["_parentaccountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
    var username = results.value[i]["username"];

    console.log("User " + i + " : " + username);

    var select = document.getElementById('deptUserList');
    var opt = username;
    //alert(opt);
    var el = document.createElement('option');

    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);



    }
    } else {
    crmWindow.Xrm.Utility.alertDialog(this.statusText);
    }
    }
    };


    req.send();
    }
    });


    </script>

    ```

I am going round in circles trying to work this out, I am a far stretch away from an expert with JS I just cannot see what is going on with this.

[Proof its creating the options][1]
[Options visible after stepping through the code][2]
[Options not visible without stepping through code][3]


  [1]: https://i.stack.imgur.com/5VvJR.png
  [2]: https://i.stack.imgur.com/jU3kM.png
  [3]: https://i.stack.imgur.com/Plvkm.png

Thanks in advance,
David