diff --git a/site/content/examples/7guis-crud/App.svelte b/site/content/examples/7guis-crud/App.svelte
index bf68cb2b8d..388a2f4ea3 100644
--- a/site/content/examples/7guis-crud/App.svelte
+++ b/site/content/examples/7guis-crud/App.svelte
@@ -3,13 +3,22 @@
 <script>
 	export let people = [];
 
-	let filteredPeople;
-	let selected;
 	let prefix = '';
 	let first = '';
 	let last = '';
 	let i = 0;
 
+	$: filteredPeople = prefix
+		? people.filter(person => {
+			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().startsWith(prefix.toLowerCase());
+		})
+		: people;
+
+	$: selected = filteredPeople[i];
+
+	$: reset_inputs(selected);
+
 	function create() {
 		people = people.concat({ first, last });
 		i = people.length - 1;
@@ -27,18 +36,8 @@
 		i = Math.min(i, people.length - 1);
 	}
 
-	$: filteredPeople = prefix
-		? people.filter(person => {
-			const name = `${person.last}, ${person.first}`;
-			return name.toLowerCase().startsWith(prefix.toLowerCase());
-		})
-		: people;
-
-	$: selected = filteredPeople[i];
-
-	$: if (selected) {
-		first = selected.first;
-		last = selected.last;
+	function reset_inputs(person) {
+		({ first, last } = person);
 	}
 </script>