How do I increase the width of a bootstrap / popper drop down menu

Question

I'm developing an ASP.NET MVC Razor UI using bootstrap and I would like to increase the width of the drop-down menu.

I'm using bootstrap 4.5.2, popper 1.16.1, and jquery 3.5.1

Here is an example of my UI where the menu is not wide enough which makes it impossible to distinguish between items

The menu is dynamically updated from data read from a multi-level database (I know a tree-view would be better, but this is what I inherited from the previous developer)

cshtml:

        <div class="data-input-group">
            @Html.LabelFor(m => m.SourceTag)
            @Html.EditorFor(m => m.SourceTag, new { htmlAttributes = new { list = "source-tag-list", style = "width: 750px" } })
            @Html.ValidationMessageFor(m => m.SourceTag)
        </div>
        <datalist id="source-tag-list"></datalist>

script:

function updateList(listElement, dataSourceName, getFunction, baseTag) {
    var getURL = '../ScriptHelper/' + getFunction + '?DataSourceName=' + dataSourceName + '&BaseTag=' + baseTag

    console.log("Update List (URL=" + getURL + ")");

    if (listElement.length > 0) {
        listElement.empty();
        $.get(getURL, function (objectNames) {
            for (var i = 0; i < objectNames.length; i++) {
                listElement.append($('<option></option>').val(objectNames[i]));
            }
        });
    }
}

$("#SourceTag").on("change", function() {
    sourceTagChanged();
});

function sourceTagChanged() {
    console.log("Source Tag Name Changed");

    var list = $('datalist#source-tag-list');
    var dataSourceName = $("#DataSourceName").val();
    var baseTag = $("#SourceTag").val();

    $("#SourceTag").width += 50;

    updateList(list, dataSourceName, 'GetTagNames', baseTag);
}