From 1a3b8b78e7f74e99d9e879e0254b5e169e4c2235 Mon Sep 17 00:00:00 2001
From: Marcel van Doornen <vandoornenmarcel@gmail.com>
Date: Sun, 24 Mar 2024 13:53:57 +0100
Subject: [PATCH] Allow multiple rating fields in one form (#1)

* Update the for and id field attributes with the form field name so you can use multiple start fields

* remove unnecessary new method

* use id to identify each field

---------

Co-authored-by: Mo Khosh <mskhoshnazar@gmail.com>
---
 resources/views/half-stars/component.blade.php | 13 +++++++------
 resources/views/simple/component.blade.php     |  9 +++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/resources/views/half-stars/component.blade.php b/resources/views/half-stars/component.blade.php
index 4784d5e..975469d 100644
--- a/resources/views/half-stars/component.blade.php
+++ b/resources/views/half-stars/component.blade.php
@@ -1,4 +1,5 @@
 @php
+    $id = $getId();
     $isDisabled = $isDisabled();
     $color = $getColor();
     $colorClass = match ($color) {
@@ -42,14 +43,14 @@
             <input
                 type="radio"
                 value="0"
-                id="star-0"
+                id="{{ $id }}-star-0"
                 class="!hidden peer"
                 @disabled($isDisabled)
                 {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
             >
 
             <label
-                for="star-0"
+                for="{{ $id }}-star-0"
                 @class([
                     "text-slate-300 peer-checked:text-danger-500",
                     "group-hover:!text-slate-300 peer-hover:!text-danger-500 cursor-pointer" => ! $isDisabled,
@@ -61,7 +62,7 @@ class="!hidden peer"
 
         @foreach ($getStarsArray() as $value)
             <label
-                for="star-{{ $value - 0.5 }}"
+                for="{{ $id }}-star-{{ $value - 0.5 }}"
                 @class([
                     "shrink-0 relative {$halfSizeClass} overflow-hidden {$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -73,7 +74,7 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value - 0.5 }}"
-                id="star-{{ $value - 0.5 }}"
+                id="{{ $id }}-star-{{ $value - 0.5 }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)
@@ -81,7 +82,7 @@ class="!hidden peer"
             >
 
             <label
-                for="star-{{ $value }}"
+                for="{{ $id }}-star-{{ $value }}"
                 @class([
                     "shrink-0 relative {$halfSizeClass} overflow-hidden {$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -93,7 +94,7 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value }}"
-                id="star-{{ $value }}"
+                id="{{ $id }}-star-{{ $value }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)
diff --git a/resources/views/simple/component.blade.php b/resources/views/simple/component.blade.php
index bdc21e2..7f82500 100644
--- a/resources/views/simple/component.blade.php
+++ b/resources/views/simple/component.blade.php
@@ -1,4 +1,5 @@
 @php
+    $id = $getId();
     $isDisabled = $isDisabled();
     $color = $getColor();
     $colorClass = match ($color) {
@@ -35,14 +36,14 @@
             <input
                 type="radio"
                 value="0"
-                id="star-0"
+                id="{{ $id }}-star-0"
                 class="!hidden peer"
                 @disabled($isDisabled)
                 {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
             >
 
             <label
-                for="star-0"
+                for="{{ $id }}-star-0"
                 @class([
                     "text-slate-300 peer-checked:text-danger-500",
                     "group-hover:!text-slate-300 peer-hover:!text-danger-500 cursor-pointer" => ! $isDisabled,
@@ -54,7 +55,7 @@ class="!hidden peer"
 
         @foreach ($getStarsArray() as $value)
             <label
-                for="star-{{ $value }}"
+                for="{{ $id }}-star-{{ $value }}"
                 @class([
                     "{$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -66,7 +67,7 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value }}"
-                id="star-{{ $value }}"
+                id="{{ $id }}-star-{{ $value }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)