[Svelte4] bind:group in nested for loop not working

[xgwang-scienceos]

Describe the bug

I have a 2d array of checkboxes that has 4 rows and 3 cols:

const rows = [
    ["A0", "B0", "C0"],
    ["A1", "B1", "C1"],
    ["A2", "B2", "C2"],
    ["A3", "B3", "C3"]
];

Then I have a list of 3 lists, each represent selected in a col:

let selectedInCol = [[], [], []];

Then I layout the checkboxes in a nested for loop:

{#each rows as row}
    <div>
        {#each row as cell, j}
            <input type="checkbox" bind:group={selectedInCol[j]} name={cell} value={cell} />
        {/each}
    </div>
{/each}

I'd expect the 4 checkboxes in each col becomes a group, where I can check one or more in the same col. But they are mutually exclusive, e.g. checking "A0", then check "A1" will cancel "A0".

Reproduction

Here is the REPL for issue reproduction: https://svelte.dev/repl/668a43c2a6df4d56a22ee4a6778d4197?version=3.44.2

As a positive control, when I manually iterate the for loop, it works: https://svelte.dev/repl/91450e9337084f27907373d45f441854?version=4.2.18

We also have a workaround without using bind:group for anyone seeing a similar issue: https://svelte.dev/repl/05d73530bbc84c5392026a3b34924fbd?version=3.44.2

Logs

No response

System Info

The issue is reproduced in REPL. See Reproduction section for links

Severity

annoyance