In JavaScript (specifically node.js) how can I generate a reusable list of dynamically generated and incremented variable names using a for loop?

I’m creating a custom Gutenberg block using node.js and REACT. Eventually this will be a Bootstrap slider that can have slides added dynamically. For each slide the user needs to upload a video or image. I am doing this using the built-in component that is part of @wordpress/block-editor.

I’ve added 3 <MediaUpload> components in the <InspectorControls> that will display in the right block controls column in WordPress.

The work by calling an “onChange” function that updates the backgroundImage attribute that is originally set in block.json.

<InspectorControls>
    <PanelRow>
        <fieldset class="media-upload">
        <strong>Select slide 1 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage} 
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
        <fieldset class="media-upload">
        <strong>Select slide 2 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
        <fieldset class="media-upload">
        <strong>Select slide 3 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
    </PanelRow>
</InspectorControls>

The function looks like this

const onImageSelect = ( imageObject ) => {
        setAttributes( { backgroundImage: imageObject.url } )
}

The problem is that in order for this to work I would have to create a separate function for every instance of the MediaUpload component, for example, onImageSelect1, onImageSelect2, onImageSelect3 and these would have to have the corresponding backgroundImage attribute incremented as well, e.g. backgroundImage1, backgroundImage2, backgroundImage3.

This is ok with a small case scenario like this, but I will add many more user controls for all kinds of aspects of the slider, so I need to know how I can do this in as few lines of code as possible.

I need to make the onImageSelect function dynamic. I’ve tried adding a “media-upload” class to each instance of the MediaUpload component and then use a for loop to loop through these and create incremented reusable variable names. I might be way of the mark here? I’m really struggling to write the loop; this is the result from my experimentation so far.

var thisClassName = 'media-upload';
    var items = document.getElementsByClassName(thisClassName);
    for (var i=0; i < items.length; i++) {
        items[i].setAttribute("id", "onImageSelect" +i);
        var hereItIs = items[i].id
        console.log(hereItIs)
    }

The output of the above was unexpected and I also can’t access any of the variable values inside the loop because they aren’t exposed to scope. I guess my main question is how can I generate a reusable list of dynamically generated and incremented variable names using a for loop?

My aim is to have

const onImageSelect1 = ( imageObject ) => {
        setAttributes( { backgroundImage1: imageObject.url } )
}

const onImageSelect2 = ( imageObject ) => {
        setAttributes( { backgroundImage2: imageObject.url } )
}

const onImageSelect3 = ( imageObject ) => {
        setAttributes( { backgroundImage3: imageObject.url } )
}

but, without writing it like this. I want a single function where onImageSelect and backgroundImage3 are being dynamically incremented based upon the number of MediaUpload components (or classes of its wrapper) the script finds on the page.