diff --git a/resources/views/components/ingredient-picker.blade.php b/resources/views/components/ingredient-picker.blade.php
index e78a9a0..90b0f4c 100644
--- a/resources/views/components/ingredient-picker.blade.php
+++ b/resources/views/components/ingredient-picker.blade.php
@@ -91,6 +91,7 @@
                                 this.$refs.ingredients_type.value = selected.dataset.type;
                                 this.$refs.ingredients_name.value = selected.dataset.name + (selected.dataset.detail ? `, ${selected.dataset.detail}` : '');
                                 this.searching = false;
+                                this.results = [];
                             }
                         }
                     }
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 42b393f..2cdd90d 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -72,15 +72,17 @@
 
                         <!-- Ingredients -->
                         <h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
-                        <div x-data="{ ingredients: 1 }" class="ingredients space-y-4">
-                            @foreach($ingredients as $ingredient)
+                        <div x-data class="ingredients space-y-4">
+                            @forelse($ingredients as $ingredient)
                                 @include('recipes.partials.ingredient-input', $ingredient)
-                            @endforeach
-                            <template x-if="ingredients > 0" x-for="i in ingredients">
+                            @empty
                                 @include('recipes.partials.ingredient-input')
-                            </template>
-                            <x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
-                                <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            @endforelse
+                            <div class="entry-template hidden">
+                                @include('recipes.partials.ingredient-input')
+                            </div>
+                            <x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
+                                <svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
                                 </svg>
                             </x-inputs.icon-button>
@@ -88,22 +90,24 @@
 
                         <!-- Steps -->
                         <h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
-                        <div x-data="{ steps: 0 }" class="steps">
-                            @foreach($steps as $step)
+                        <div x-data class="steps">
+                            @forelse($steps as $step)
                                 @include('recipes.partials.step-input', $step)
-                            @endforeach
-                            <template x-for="i in steps + 1">
+                            @empty
                                 @include('recipes.partials.step-input')
-                            </template>
-                            <x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
+                            @endforelse
+                            <div class="entry-template hidden">
+                                @include('recipes.partials.step-input')
+                            </div>
+                            <x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
                                 <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
                                 </svg>
                             </x-inputs.icon-button>
                         </div>
 
-                        <div class="flex items-center justify-end mt-4">
-                            <x-inputs.button class="ml-3">
+                        <div x-data class="flex items-center justify-end mt-4">
+                            <x-inputs.button x-on:click="removeTemplates();" class="ml-3">
                                 {{ ($recipe->exists ? 'Save' : 'Add') }}
                             </x-inputs.button>
                         </div>
@@ -135,6 +139,28 @@
                     },
                 })
             </script>
+            <script type="text/javascript">
+                /**
+                 * Adds a set of entry form fields from the template.
+                 *
+                 * @param {object} $el Entry lines parent element.
+                 */
+                let addEntryNode = ($el) => {
+                    // Create clone of template entry.
+                    let template = $el.querySelector(':scope .entry-template');
+                    let newEntry = template.cloneNode(true).firstElementChild;
+
+                    // Insert new entry before add button.
+                    $el.insertBefore(newEntry, template);
+                }
+
+                /**
+                 * Removes any hidden templates before form submit.
+                 */
+                let removeTemplates = () => {
+                    document.querySelector(':scope .entry-template').remove();
+                }
+            </script>
         @endpush
     @endonce
 </x-app-layout>
diff --git a/resources/views/recipes/partials/ingredient-input.blade.php b/resources/views/recipes/partials/ingredient-input.blade.php
index b3380a4..3a8201e 100644
--- a/resources/views/recipes/partials/ingredient-input.blade.php
+++ b/resources/views/recipes/partials/ingredient-input.blade.php
@@ -33,12 +33,11 @@
         <div class="flex-none">
             <x-inputs.icon-button type="button"
                                   color="red"
-                                  x-on:click="$event.target.parentNode.parentNode.parentNode.remove(); (ingredients > 1 ? ingredients-- : null);">
+                                  x-on:click="$event.target.parentNode.parentNode.parentNode.remove();">
                 <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                 </svg>
             </x-inputs.icon-button>
         </div>
     </div>
-    <hr class="my-4 md:hidden" x-show="ingredients > 0"/>
 </div>