Updating a Dropdown Based on the Selection of Another Dropdown - replaceWith Not Working

Question

I have a couple of drop downs, when a venue is choosen from the first one, it should populate the second drop down with floor values. Using jQuery AJAX I am able to get the selected venue, send that back to my controller and get the data needed for the second drop down. However I am not able to replace the existing drop down with the new data. This is the HTML for the two drop downs:

                    <div class="row no-margin-xs m-b-15">
                        <label class="col-sm-4 col-md-3 control-label p-xs-l-0">Venue</label>
                        <div class="col-sm-6 col-md-4 no-padding-xs">
                            <select class="form-control bs-select" name="venue" id="venue_select"
                                    data-noneSelectedText="No venue selected"
                                    data-validation="required"
                                    data-validation-error-msg-required="Please select a venue"
                                    data-dynamic-visible="true"
                                    data-dynamic-relation="venue"
                            >
                                <option value="0" >Select a Venue</option>
                                <!-- ** Pull venue data and list here for selections -->
                                @foreach($venues as $venue)
                                    @if(!is_null($venue->name))
                                    <option value="{{$venue->id}}" >{{ $venue->name  }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div><!-- /.row -->

                    <div class="row no-margin-xs m-b-15" id="select_floor">
                        <label class="col-sm-4 col-md-3 control-label p-xs-l-0">Location Floor</label>
                        <div class="col-sm-6 col-md-4 no-padding-xs">
                            <select class="form-control bs-select" name="floor" id="floor_select"
                                    data-validation="required"
                                    data-validation-error-msg-required="Please select a floor"
                            >
                                <option value="">Select a Floor</option>
                                @foreach($locations as $location)

                                    <option value="{{ $location->floor_id }}"
                                            data-dynamic-relation-for="venue"
                                            data-dynamic-relation-targets="[{{ $location->id }}]"
                                            {{ old('floor_id') === (string) $location->floor_id ? ' selected' : '' }}
                                    >{{ $location->floor }}</option>

                                @endforeach
                            </select>
                        </div>
                    </div><!-- /.row --> 

There is a lot included the HTML for these drop down (I didn't write the code) that appear to be interfering with replaceWith() function. The jQuery code that retrieves the data for the second drop down looks like this:

$('#venue_select').on("change", function(){
    var selectVenueId = this.value
    console.log('Selected venue', selectVenueId);
    _xhr = $.ajax(
        url: $("meta[name='root']").attr("content") + '/app/settings/locations/data',
        type: 'POST',
        headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
        data: {
          venue_id: selectVenueId,
          },
        dataType: 'JSON',
        async: true,
        cache: false,
        error: function (jqXHR, textStatus, errorThrown) {
            _this.SetLoading(false);

            _xhr = null;
        },
        success: function (response) {
            _this.SetLoading(false);

            var locations = response;

            console.log('Locations: ', locations);

            var listItems = '<option value="">Select a Floor</option>';
                    
            for (var i in locations){
                listItems += "<option value='" + i + "'>" + locations[i] + "</option>";
            }
                   
            $('#locations-new .block-content #select_floor select#floor_select').replaceWith('<select class="form-control bs-select" name="floor" id="floor_select"></select>' + listItems + '</select>');
                    
            console.log('listItems: ', listItems);

            _xhr = null;
            }
       });
});

This is what I get on the front end when I run it:

It's not replacing the second dropdown but adding it. You may have noticed the additional elements in the select tags:

data-dynamic-visible="true"

data-dynamic-relation-for="venue"

They appear to have a bearing on dynamic updating, but no Google searches have turned up any reference to these. There is a dynamicRelation.js file which looks like this:

define([
    "jquery",
    "underscore"
], function(s) {

    var DynamicRelationUiClass = function () {
        // Private vars
        var _this = this;

        // Private functions
        var _onUpdate = function (e) {
            _this.Update(e.currentTarget);
        };

        var _construct = function () {
            $(document).on("change click", "[data-dynamic-relation]", _onUpdate);

            $('[data-dynamic-relation]').each(function () {
                _this.Update(this, 0);
            });
        };

        // Public functions
        this.Update = function(element, duration) {
            if (_.isUndefined(duration)) { duration = 250; }

            element = $(element);

            var relationGroup = element.data("dynamic-relation"),
                currentValue = element.val();

            if (parseInt(currentValue) !== NaN) { currentValue = parseInt(currentValue); }

            $('[data-dynamic-relation-for="' + relationGroup + '"]').each(function () {
                var t = $(this),
                    targets = t.data('dynamic-relation-targets'),
                    found = targets.indexOf(currentValue) !== -1;

                t.prop("disabled", !found);
                if (!found && t.prop("selected")) { t.prop("selected", false); }
            });

            $('.bs-select').selectpicker('refresh');
            $('.multiselect').multiSelect('refresh');
        };

        _construct();
    }

    return DynamicRelationUiClass;
});

I would like any clue to a solution, especially if someone has information of the dynamicVisible feature, or short of that how to get the replaceWith() to work.