Working with x-show and tab content

[ItsJustPW]

I'm trying to work with x-show and tabs.

Currently I've a repeater field in Statamic which allows you to add a number of repeating items. I am trying to work out how I would pass an ID to set the ID to an item button, then to only display that item. Example:

`

<!-- Tabs buttons -->
<div class="flex flex-wrap justify-center -m-2" data-aos="fade-up" data-aos-delay="400" data-aos-anchor="[data-aos-id-tabs]">
    {{ section_4_item }}
    <button :class="{ 'opacity-50': tab !== '1' }" class="flex items-center font-medium py-2 px-4 m-2 bg-gray-800 rounded-full group transition duration-500" @click="tab = '1'">
        <svg class="w-4 h-4 fill-current text-gold-main mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 5.5c-.311.001-.62.061-.909.177l-2.268-2.268c.116-.29.176-.598.177-.909a2.5 2.5 0 00-5 0c.001.311.061.62.177.909L3.409 5.677A2.473 2.473 0 002.5 5.5a2.5 2.5 0 000 5c.311-.001.62-.061.909-.177l2.268 2.268c-.116.29-.176.598-.177.909a2.5 2.5 0 105 0 2.473 2.473 0 00-.177-.909l2.268-2.268c.29.116.598.176.909.177a2.5 2.5 0 100-5zM8 11c-.311.001-.62.061-.909.177L4.823 8.909a2.423 2.423 0 000-1.818l2.268-2.268a2.423 2.423 0 001.818 0l2.268 2.268a2.423 2.423 0 000 1.818l-2.268 2.268A2.473 2.473 0 008 11z" />
        </svg>
        <span class="text-gray-400 group-hover:text-gray-200 transition-colors duration-150 ease-in-out">{{ s4_title }}</span>
    </button>
    {{ /section_4_item }}
</div>

<!-- Tabs items -->
<div class="relative flex flex-col mt-16" data-aos="fade-up">
    {{ section_4_item }}
    <!-- Item -->
    <div class="w-full" x-show="tab === '1'" x-transition:enter="transition ease-in-out duration-500 transform order-first" x-transition:enter-start="opacity-0 scale-98" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-out duration-300 transform absolute" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-98">
        <article class="relative max-w-md mx-auto md:max-w-none">
            <figure class="md:absolute md:inset-y-0 md:right-0 md:w-1/2">
                <img class="w-full h-full object-cover" src="{{ s4_image }}" width="516" height="387" alt="Tabs 01" />
            </figure>
            <div class="relative bg-gray-800 py-8 md:py-16 px-6 md:pr-16 md:max-w-lg lg:max-w-xl">
                <h4 class="h4 mb-2">{{ s4_heading }}</h4>
                <p class="text-lg text-gray-400">{{ s4_content }}</p>
                <a class="btn-sm text-gray-800 bg-gold-main hover:bg-gold-hover mt-6" href="{{ s4_button_link }}">
                    <span class="text-sm">{{ s4_button_text }}</span>
                    <svg class="w-3 h-3 text-gray-800 shrink-0 ml-2" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 5H0v2h6v4l6-5-6-5z" />
                    </svg>
                </a>
            </div>
        </article>
    </div>
    {{ /section_4_item }}
</div>

`

So my question is, is there a way to pass in an id for the entry into this:
<button :class="{ 'opacity-50': tab !== '1' }" class="flex items-center font-medium py-2 px-4 m-2 bg-gray-800 rounded-full group transition duration-500" @click="tab = '1'">
So I'm then able to use that id to dislpay the content?

Any help/advise and ideally examples would be greatly appreciated.

[twd3]

Try putting {{ index }} both in your @click and your x-show. This should give you incrementing numbers (I think).

[ItsJustPW]

That worked perfectly @twd3 thanks for taking the time to answer.