How to export array from inside addEventListener to another JS file?

Question

My web app has a filter page, where if the value of the last filter is set, the addEventListener creates an array using filter(), from my dataset array , filterArr, based on the values chosen in the select elements.

How do I export the resulting array to another JS file?
Using export default arrForQuiz generates the error "unexpected token: export".

Have added the code for the addEventListener and a visual of what I am trying for. Besides that, both JS files involved have type="module" and, as in picture, the original dataset array is already imported from a third file.

I am quite new to this. Was getting all kinds of strange errors when I used one JS file (for two pages), so switched to this approach which so far works well. If it's not a great idea, I'm all ears.

Code:

chooseSection.addEventListener("input", () => {
    let arrForQuiz = filterArr.filter( function(el) {
        return  el.book === chooseBook.value &&
                el.chapter === chooseChapter.value &&
                el.section === chooseSection.value;
        }); 
    // export arrForQuiz to another file
});

Visual:

Answer 1

After countless tries of different things, this is what worked. Thanks to Andre for the inspiration. His answer should probably work, I think I just wasn't doing it right.

Solution:
Pass the selected values to the other js file with sessionStorage and do the filtering there.

Code in filter.js:
-> as the value of the last select element changes, store all the selected values in sessionStorage.

chooseSection.addEventListener("input", () => {
    sessionStorage.setItem('storedBook', chooseBook.value);
    sessionStorage.setItem('storedChapter', chooseChapter.value);
    sessionStorage.setItem('storedSection', chooseSection.value);
});

Code in script.js:
-> get the selected values from sessionStorage and use them to filter the data array.

let selectedBook = sessionStorage.getItem('storedBook');
let selectedChapter = sessionStorage.getItem('storedChapter');
let selectedSection = sessionStorage.getItem('storedSection');

let quizArr = mainArr.filter( function(el) {
    return  el.book === selectedBook &&
            el.chapter === selectedChapter &&
            el.section === selectedSection;
});

Visual:

Answer 2

I would define arrForQuiz as an export and import it in the files I want to share it. This way changes made in one file will be visible in the other.

For example, like so:

shared-stuff.js

export const sharedObject = [];

file-a.js

import { sharedObject } from './shared-stuff.js';

// moving the pointer will push a `1` into the shared array
window.addEventListener('pointermove', () => sharedObject.push(1);

file-b.js

import { sharedObject } from './shared-stuff.js';

// clicking the window will output the shared arrays current content
window.addEventListener('click', () => console.log(sharedObject));

For this to work, the exported value needs to be an object and can't be reassigned in one of the files using it. Otherwise there won't be a common binding to the shared memory.

In your example, the filtering would need to preserve the original array, so you would have to re-write the filtering. Instead of arrForQuiz = filterArr.filter(...) you would do something like this:

// we iterate over the array in reverse order, as we might change the input array
// and we don't want to mess up the indexing
for (let i = arrForQuiz.length - 1; i < 0; i -= 1) {
    const el = arrForQuiz[i];

    if (el.book === chooseBook.value &&
        el.chapter === chooseChapter.value &&
        el.section === chooseSection.value) {
        continue;
    }
    
    // Array.prototype.splice changes the array in place
    arrForQuiz.splice(i, 1);
}

You could stick with a more functional approach to dealing with the array, when exporting an object, which has a field, that holds the array. Here's a little more detail on what I mean by that:

shared-stuff-2.js

export const state = { sharedArray: [] };

If you define your export like this, changes to the state obejct are shared between imports again, but with the twist, that you can normally assign to fields, like in our case sharedArray, and those changes will propagate to other files importing the object.