Add "ingredient ID" attribute to ingredients

This change prevents ID collision when dealing with multiple models.

app/Models/Traits/Ingredient.php

@@ -8,21 +8,28 @@ use Illuminate\Database\Eloquent\Collection as DatabaseCollection;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 use Spatie\Tags\Tag;
 
 trait Ingredient
 {
     /**
-     * Add special `type` attribute to appends.
+     * Add special attributes to appends.
      */
     public function initializeIngredient(): void {
+        $this->appends[] = 'ingredient_id';
         $this->appends[] = 'type';
     }
 
+    /**
+     * Gets the class short name and ID combo to ensure uniqueness between models.
+     */
+    public function getIngredientIdAttribute(): string {
+        return Str::lower((new \ReflectionClass($this))->getShortName()) . "-$this->id";
+    }
+
     /**
      * Get the class name.
-     *
-     * This is necessary e.g. to provide data in ingredient picker responses.
      */
     public function getTypeAttribute(): string {
         return $this::class;

resources/views/components/ingredient-picker.blade.php

@@ -25,7 +25,7 @@
         <div x-show="searching" x-cloak>
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
                  x-bind="ingredient">
-                <template x-for="result in results" :key="result.id">
+                <template x-for="result in results" :key="result.ingredient_id">
                     <div class="p-1 border-b-2 border-gray-500 hover:bg-amber-300 cursor-pointer" x-bind:data-id="result.id">
                         <div class="pointer-events-none">
                             <div>