Prevent overwriting entry data on form error

resources/views/journal-entries/create.blade.php

@@ -9,16 +9,16 @@
                 <div class="p-6 bg-white border-b border-gray-200">
                     <form method="POST" action="{{ route('journal-entries.store') }}">
                     @csrf
-                        <div x-data="{ ingredients: 1 }">
+                        <div x-data="{ ingredients: {{ $ingredients ? 0 : 1 }} }">
                             <div class="space-y-4">
                                 @foreach($ingredients as $ingredient)
                                     @include('journal-entries.partials.entry-item-input', $ingredient)
                                 @endforeach
                                 <template x-if="ingredients > 0" x-for="i in ingredients">
-                                    @include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
+                                    @include('journal-entries.partials.entry-item-input', ['template' => true, 'default_date' => $default_date])
                                 </template>
                             </div>
-                            <x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
+                            <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">
                                     <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>

resources/views/journal-entries/partials/entry-item-input.blade.php

@@ -1,4 +1,4 @@
-<div x-data x-init="setDefaultsFromPrevious($el);" class="flex items-center space-x-2">
+<div x-data @isset($template)x-init="setDefaultsFromPrevious($el);"@endisset class="flex items-center space-x-2">
     <div class="flex flex-col space-y-4 w-full">
         <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
             <!-- Date -->
@@ -19,7 +19,7 @@
                                  :options="$meals"
                                  :selectedValue="$meal ?? null"
                                  required>
-                    <option value="" disabled selected>Meal</option>
+                    <option value="">-- Meal --</option>
                 </x-inputs.select>
             </div>
 
@@ -41,7 +41,7 @@
                                  class="block w-full"
                                  :options="$units"
                                  :selectedValue="$unit ?? null">
-                    <option value="">Unit</option>
+                    <option value="">-- Unit --</option>
                 </x-inputs.select>
             </div>
         </div>
@@ -61,7 +61,7 @@
     <div class="flex-none">
         <x-inputs.icon-button type="button"
                               color="red"
-                              x-on:click="($parent.ingredients > 1 ? $parent.ingredients-- : null); $event.target.parentNode.parentNode.remove();">
+                              x-on:click="$event.target.parentNode.parentNode.remove();">
             <svg class="h-8 w-8 pointer-events-none m-auto" 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>
@@ -73,9 +73,21 @@
     @push('scripts')
         <script type="text/javascript">
             let setDefaultsFromPrevious = ($el) => {
+                let previousEl = $el.previousElementSibling;
+
+                // Skip the <template> node.
+                if (previousEl && previousEl.nodeName === 'TEMPLATE') {
+                    previousEl = previousEl.previousElementSibling;
+                }
+
+                // Do not continue if there is no previous element.
+                if (!previousEl) {
+                    return;
+                }
+
+                // Set date and meal from the previous element.
                 let currentDateEl = $el.querySelector('input[name="ingredients[date][]"]');
                 let currentMealEl = $el.querySelector('select[name="ingredients[meal][]"]');
-                let previousEl = $el.previousElementSibling;
                 let previousDateEl = previousEl.querySelector('input[name="ingredients[date][]"]');
                 let previousMealEl = previousEl.querySelector('select[name="ingredients[meal][]"]');
                 if (currentDateEl && currentMealEl && previousDateEl && previousMealEl) {