multiple select elements on one page causes error when removing one programatically

[isaacfink]

I have the following code

{#each pkg.items as item}
    <div class="">
        <div class="themed-select">
               <Select
                    tems={products}
                    isMulti={true}
                    showChevron={true}
                    on:select={(ev) => item.products = ev.detail}
               />
            </div>
    </div>
    <button on:click={removeItem}>remove</button>
{/each}

problem is when I remove the item the select stays filled in with the previous values, for example if I have 3 items with 3 select elements, and I remove the second one, the third one (which should now be the second one) stys with the values of the previous second one which is now deleted

[isaacfink]

I am an idiot, turns out it's the way svelte updates the dom, adding a key to the each block solved this

[rob-balfre]

@isaacfink oh it's caught me out a few times too!

[inconspicuous99]

@isaacfink could you share your finished product please?

[isaacfink]

@isaacfink could you share your finished product please?

It's on an admin page for a website, I can share how it works and some screesnshots/screen recordings, but I can't share the project