Alpinejs Hide/Show element inside laravel foreach loop-CodePudding

I am using alpinejs with laravel for a project, for every row of data i want to add hide/show button to show a descritption , the problem when i press show every decription inside foreach show and same for hide

  @foreach ($positives as $positive)
            <!-- Card -->
            <div >
                <div >
                    <div >
                        <div
                            >
                            <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                            </svg>
                        </div>
                        <div>
                            <p >
                                {{$positive->name}}
                            </p>
                            <p >
                                376
                            </p>
                        </div>
                    </div>



                    <div  @click="isDescriptionOpen=!isDescriptionOpen">

                </div>

                <div x-show="isDescriptionOpen"> 
                 <p>  description </p>
                </div>

                
            </div>
            <!-- Card -->
            @endforeach

CodePudding user response：

The problem here is that you don't have multiple components created.

Instead of:

 <!-- Card -->
 <div >

you should have

 <!-- Card -->
 <div  x-data="{isDescriptionOpen: false}">

and you should remove outer component that you probably created for isDescriptionOpen data.