I am trying to populate an FAQs section with a UI that hides and shows the answers depending on when the user clicks to view the answer, but for some reasons the answers still shows without clicking hide or show button from the second array onwards.

The first array however is being rendered as normal, i think this has to do more on the view component than from my Livewire component.

Also when i open an answer, the other answers needs to be closed if they hsave been open

<div class="wow fadeInUp">
            @foreach ($faqs as $key => $faq)
            <div x-data="{selected:0}">
              <!-- faq item -->
                <div class="flex flex-col border-b border-white/[0.15]">
                    <h4 @click="selected !== 0 ? selected = 0 : selected = null"
                      class="cursor-pointer flex justify-between items-center font-semibold text-[22px] leading-[28px] py-5 lg:py-7"
                      :class="selected == 0 ? 'text-white' : ''">
                        {{ $faq->question }}
                      <span :class="selected == 0 ? 'hidden' : 'block'">
                        <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          xmlns=";>
                          <path
                            d="M22.5 11.1752H12.8625V1.5002C12.8625 1.0502 12.4875 0.637695 12 0.637695C11.55 0.637695 11.1375 1.0127 11.1375 1.5002V11.1752H1.50001C1.05001 11.1752 0.637512 11.5502 0.637512 12.0377C0.637512 12.4877 1.01251 12.9002 1.50001 12.9002H11.175V22.5002C11.175 22.9502 11.55 23.3627 12.0375 23.3627C12.4875 23.3627 12.9 22.9877 12.9 22.5002V12.8627H22.5C22.95 12.8627 23.3625 12.4877 23.3625 12.0002C23.3625 11.5502 22.95 11.1752 22.5 11.1752Z"
                            fill="" />
                        </svg>
                      </span>

                      <span :class="selected == 0 ? 'block' : 'hidden'">
                        <svg width="22" height="2" viewBox="0 0 22 2" fill="none" xmlns=";>
                          <path
                            d="M21.125 1.86263H0.875012C0.425012 1.86263 0.0125122 1.48763 0.0125122 1.00013C0.0125122 0.550134 0.387512 0.137634 0.875012 0.137634H21.125C21.575 0.137634 21.9875 0.512634 21.9875 1.00013C21.9875 1.45013 21.575 1.86263 21.125 1.86263Z"
                            fill="white" />
                        </svg>
                      </span>
                    </h4>
                    <p x-show="selected == 0" class="font-medium pb-7">
                        {!! $faq->answer !!}
                    </p>
                  </div>
            </div>
            @endforeach
          </div>

I have tried using a @foreach and $key to populate my $faq->data as shown below.

@foreach ($faqs as $key => $faq)
    <div x-data="{ selected: null }">
        <!-- FAQ item -->
        <div class="flex flex-col border-b border-white/[0.15]">
            <h4 
                @click="selected !== {{ $key }} ? selected = {{ $key }} : selected = null"
                class="cursor-pointer flex justify-between items-center font-semibold text-[22px] leading-[28px] py-5 lg:py-7"
                :class="selected == {{ $key }} ? 'text-white' : ''">
                {{ $faq->question }}
                <span :class="selected == {{ $key }} ? 'hidden' : 'block'">
                    <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns=";>
                        <path
                            d="M22.5 11.1752H12.8625V1.5002C12.8625 1.0502 12.4875 0.637695 12 0.637695C11.55 0.637695 11.1375 1.0127 11.1375 1.5002V11.1752H1.50001C1.05001 11.1752 0.637512 11.5502 0.637512 12.0377C0.637512 12.4877 1.01251 12.9002 1.50001 12.9002H11.175V22.5002C11.175 22.9502 11.55 23.3627 12.0375 23.3627C12.4875 23.3627 12.9 22.9877 12.9 22.5002V12.8627H22.5C22.95 12.8627 23.3625 12.4877 23.3625 12.0002C23.3625 11.5502 22.95 11.1752 22.5 11.1752Z"
                            fill="" />
                    </svg>
                </span>
                <span :class="selected == {{ $key }} ? 'block' : 'hidden'">
                    <svg width="22" height="2" viewBox="0 0 22 2" fill="none" xmlns=";>
                        <path
                            d="M21.125 1.86263H0.875012C0.425012 1.86263 0.0125122 1.48763 0.0125122 1.00013C0.0125122 0.550134 0.387512 0.137634 0.875012 0.137634H21.125C21.575 0.137634 21.9875 0.512634 21.9875 1.00013C21.9875 1.45013 21.575 1.86263 21.125 1.86263Z"
                            fill="white" />
                    </svg>
                </span>
            </h4>
            <p x-show="selected == {{ $key }}" class="font-medium pb-7">
                {!! $faq->answer !!}
            </p>
        </div>
    </div>
@endforeach

I was expecting it to be like below image:

I am using Lravel and Livewire components in laravel and TailwindCSS