docs: Fixed TODO id in animation tutorial (sveltejs#1108)

* Tutorial: Fixed animation id

* Tutorial: Fixed id as key in another file

---------

Co-authored-by: Tee Ming <[email protected]>

Author: F2

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte

@@ -2,14 +2,16 @@
 	import TodoList from './TodoList.svelte';
 
 	const todos = $state([
-		{ done: false, description: 'write some docs' },
-		{ done: false, description: 'start writing blog post' },
-		{ done: true, description: 'buy some milk' },
-		{ done: false, description: 'mow the lawn' },
-		{ done: false, description: 'feed the turtle' },
-		{ done: false, description: 'fix some bugs' }
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing blog post' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
 	]);
 
+	let uid = todos.length + 1;
+
 	function remove(todo) {
 		const index = todos.indexOf(todo);
 		todos.splice(index, 1);
@@ -23,6 +25,7 @@
 			if (e.key !== 'Enter') return;
 
 			todos.push({
+				id: uid++,
 				done: false,
 				description: e.currentTarget.value
 			});

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 		>

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}