I'm wondering if it's possible to do this

[frederikhors]

As you can see in this Svelte 5 playground example I have players and I need to show both old and not ones using separate each.

But even when it starts you can see that the elements of the each are wrong.

If I use one button to add new one to the array it shows both of them not in the correct filtered each.

Why?

I cannot use: <Player bind:player={player} /> because of:

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. array[i] = value instead of entry = value, or bind:value={array[i]} instead of bind:value={entry})
https://svelte.dev/e/each_item_invalid_assignment

and I cannot use:

{#each players as player, i (player.id)}
  {#if player.isOld}
    <Player bind:player={players[i]} />
  {/if}
{/each}

because I need to show the index in the list too.

Is there another way?

<script>
    import Player from "./Player.svelte";

    let players = $state([
        {id: "1", isOld: false},
        {id: "2", isOld: true},
    ]);
    
    function addOldPlayer() {
        players.push({id: new Date(), isOld: true})
    }
    
    function addYoungPlayer() {
        players.push({id: new Date(), isOld: false})
    }
</script>

- All: <br>

{#if players}
    {#each players as player, index (player.id)}
        <Player {index} bind:player={players[index]} />
    {/each}
{/if}

<br><br>

- Old players: <button onclick={addOldPlayer}>Add old player</button> <br>

{#if players}
    {#each players.filter(player => player.isOld) as player, index (player.id)}
        <Player {index} bind:player={players[index]} />
    {/each}
{/if}

<br>

- Young players: <button onclick={addYoungPlayer}>Add young player</button> <br>

{#if players}
    {#each players.filter(player => !player.isOld) as player, index (player.id)}
        <Player {index} bind:player={players[index]} />
    {/each}
{/if}

[adiguba]

Hello,

I didn't understand why you cannot use the {#each}/{#if} ?

Seem fine to me :

{#each players as player, index (player.id)}
  {#if player.isOld}
    <Player {index} bind:player={players[index]} />
  {/if}
{/each}

The filtered array won't work with bind, because the index do no matches the index of the initial array.
On your exemple both players have the index "0" on the filtereds arrays...

[frederikhors]

I cannot use this because I need to show a contiguoos index. I solved it maybe temporarily using a derived {player, originalIndex} array.