How to create multiple image fields in a touch/granite dialog in AEM 6.1

On the page properties there is a tab for the thumbnail image. I added an additional tab for a background image.

But it seems to be tricky to have multiple image tabs in a dialog.

For the classic/widget based UI I had to explicitly add 'resourceType = foundation/components/image' to the new background image field so it is stored correctly. But now it works for me.

Now I also wanted to add the background image to the touch UI. So I copied the existing definition of the thumbnail image from the granite dialog and added it on a new tab.
But if I open the page properties in the touch UI and add a new image on the thumbnail or background tab,
both tabs always show the same image. In CRX I see that the nodes and properties are mixed up between both image nodes.

This is the code I added to the touch / cq dialog

....
<tabs jcr:primaryType="nt:unstructured">
    <items jcr:primaryType="nt:unstructured">
        <backgroundimage
            cq:showOnCreate="{Boolean}false"
            jcr:primaryType="nt:unstructured"
            jcr:title="Background Image"
            sling:resourceType="granite/ui/components/foundation/section"
            sling:orderBefore="cloudservices">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <image1
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
                            page="${empty param.item ? requestPathInfo.suffix : param.item}"
                            quiet="{Boolean}true">
                            <upload
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/fileupload"
                                autoStart="{Boolean}false"
                                cq-msm-lockable="/image1"
                                multiple="{Boolean}false"
                                name="./image1/file.sftmp"
                                sizeLimit="100000000"
                                title="Upload Image"
                                uploadUrl="will_be_replaced"/>
                            <preview
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/siteadmin/admin/pagepreview"/>
                        </image1>
                    </items>
                </column>
            </items>
        </backgroundimage>
        ...