Dashboard with Dynamic Content Filter for Reservation Mgmt

[JuliaHowells]

I have a dashboard that has a calendar and uses a dynamic filter. That dynamic filter is build on a dynamic content / content block programmatic (script below). I have changed the building to be multi-select optional, but when in use, the filter only applies the first building selection. How can I get this to filter based on all selected buildings?

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate var="jvar_space_data" object="true" jelly="true">

        var spaceData = [];
        var spaceGr = new GlideRecordSecure(sn_wsd_core.WPConstants.TABLES.SPACE);
        spaceGr.addQuery('region', gs.getProperty('sn_wsd_rsv.lrccd_primary_region_id'));
        spaceGr.addActiveQuery();
		spaceGr.addQuery('is_reservable',true);
        spaceGr.orderBy("region.name");
        spaceGr.orderBy("site.name");
        spaceGr.orderBy("campus.name");
        spaceGr.orderBy("building.name");
        spaceGr.orderBy("name");
        spaceGr.query();
        while(spaceGr.next()){
            spaceData.push({
                spaceId: spaceGr.getValue("sys_id"),
                spaceName: spaceGr.getDisplayValue("name"),
                buildingId : spaceGr.getValue("building"),
                buildingName : spaceGr.getDisplayValue("building"),
                campusId: spaceGr.getValue("campus"),
                campusName : spaceGr.getDisplayValue("campus"),
                siteId : spaceGr.getValue("site"),
                siteName : spaceGr.getDisplayValue("site"),
                regionId: spaceGr.getValue("region"),
                regionName: spaceGr.getDisplayValue("region"),
            });
        }
        JSON.stringify(spaceData);
    </g:evaluate>
    <g:requires name="sn_wsd_rsv.lrccd_rsv_dashboard_filter.jsdbx" params="cache=$[jvar_stamp]" />
    <style>
        .cont {
            margin-top: 20px
        }

        .filter-label {
            font-size: 16px;
            margin-top: 8px;
            margin-bottom: 5px;
        }
    </style>
    <input type="hidden" id="spaceData" value="${jvar_space_data}"></input>
    <input type="hidden" id="siteStr" value="${gs.getMessage('Select a site')}"> </input>
    <input type="hidden" id="campusStr" value="${gs.getMessage('Select a campus')}"> </input>
    <input type="hidden" id="buildingStr" value="${gs.getMessage('Select a building')}"> </input>
    <input type="hidden" id="spaceStr" value="${gs.getMessage('Select a room')}"> </input>

    <div class="container">

        <div class="row">
            <div id="site-container" class="col-md-3 col-xs-12 col-sm-12">
                <div class="filter-label"> ${gs.getMessage('Site')} </div>
                <select class="select2" id="siteSelect" style="width: 100%"
                    aria-label="${gs.getMessage('Select a site')}">
                </select>
            </div>

            <div id="campus-container" class="col-md-3 col-xs-12 col-sm-12">
                <div class="filter-label"> ${gs.getMessage('Campus')} </div>
                <select class="select2" id="campusSelect" style="width: 100%"
                    aria-label="${gs.getMessage('Select a campus')}">
                </select>
            </div>

            <div id="building-container" class="col-md-3 col-xs-12 col-sm-12">
                <div class="filter-label"> ${gs.getMessage('Building')} </div>
                <select class="select2" id="buildingSelect" style="width: 100%" multiple="true"
                    aria-label="${gs.getMessage('Select a building')}">
                </select>
            </div>

            <div id="site-container" class="col-md-3 col-xs-12 col-sm-12">
                <div class="filter-label"> ${gs.getMessage('Room')} </div>
                <select class="select2" id="spaceSelect" style="width: 100%"
                    aria-label="${gs.getMessage('Select a room')}">
                </select>
            </div>
        </div>
    </div>

</j:jelly>