Each blocks in Svelte, can't seem to wrap my head around this block of code

<script>
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
    let selected = colors[0];
</script>

<h1 style="color: {selected}">Pick a colour</h1>

<div>
    {#each colors as color}
    <button
        aria-current="{selected === color ? 'true' : undefined}"
        aria-label={color}
        style="background: {color}"
        on:click={() => selected = color}
    ></button>
    {/each}

<script>
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
    let selected = colors[0];
</script>

<h1 style="color: {selected}">Pick a colour</h1>

<div>
    {#each colors as color}
    <button
        aria-current="{selected === color ? 'true' : undefined}"
        aria-label={color}
        style="background: {color}"
        on:click={() => selected = color}
    ></button>
    {/each}