wire:click only works for the first item in foreach in livewire

Question

I want to open a model for edit item. I have added wire:click on a div but that only works for the first item of foreach.

Livewire Method

public function selectMealPlan($mealId)
{
   $this->dispatchBrowserEvent('openEditMealModal');
}

View file

@foreach ($meal_plans as $meal)
    <div class="meals-plan-item">
        <div class="meals-plan-item-type">
            <div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
            <div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
        </div>
        <div class="meals-plan-item-names">
            <div class="meals-plan-item-label">MEAL NAMES:</div>
            <div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
        </div>

        <div class="meals-plan-item-actions">
            <div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
                <i class="fas fa-pencil"></i>
            </div>

            <div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
                <i class="fas fa-trash"></i>
            </div>
        </div>

    </div>
@endforeach

<script>
  window.addEventListener('openEditMealModal', function() {
    alert('hello');
  })
</script>

Answer 1

The component should have only one root element, a div for example:

<div class="meals-plan-item">
    @foreach ($meal_plans as $meal)

    <div class="meals-plan-item-type">
        <div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
        <div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
    </div>
    <div class="meals-plan-item-names">
        <div class="meals-plan-item-label">MEAL NAMES:</div>
        <div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
    </div>

    <div class="meals-plan-item-actions">
        <div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
            <i class="fas fa-pencil"></i>
        </div>

        <div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
            <i class="fas fa-trash"></i>
        </div>
    </div>
    @endforeach
</div>