Custom interactive filter (dynamic content) for multi-select field?

[JuliaHowells]

Hi ServiceNow experts, 

I have a dynamic content widget on a dashboard. It currently has options for Site, Campus, Building, etc. These were all single-select drop-down options and all work. 

For Building, I want to change this to be a multi-select option, so they could choose 1 or more buildings and the filter would load each chosen building in the associated report.

I am able to select multiple buildings with my below script, but it only shows the first building. If I have 2 buildings selected, it only shows the first. If I remove the first building, the report refreshes and only shows the other building that was selected. 

Is it possible to have this multiselect option and show each selection on the report? How can I accomplish this? 

<?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="multiple"
    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>