Each tab set should have a unique data-tab attribute value.
<div class="tab" data-tab="42ba5ce3-c4c5-4a4f-8b1d-31a4da85b559">
<div class="tab__navigation button-group">
<button class="button button--small button--green button--green--outline" data-tab-for=49207397-618f-4103-8033-8ba1522afc7f>
<span>ipsum expedita aut</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=702c00a1-9879-4d84-8ada-9c08739cec52>
<span>eaque ut libero</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225>
<span>quia necessitatibus est</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=c3192444-f8cc-4b3c-b4ec-aeb4fadb6954>
<span>ut odit dolores</span>
</button>
</div>
<div class="tab__items">
<div class="tab__item tab__item--49207397-618f-4103-8033-8ba1522afc7f" data-tab-item="49207397-618f-4103-8033-8ba1522afc7f">
<h3 class="tab__item__title">ipsum expedita aut</h3>
Impedit nemo quo error eum eius adipisci exercitationem similique. Qui officia eum minus sunt autem. Architecto magni dolores sed optio quisquam ad omnis est minus. Molestiae soluta libero quia. Cupiditate aut vero laboriosam voluptates itaque.
</div>
<div class="tab__item tab__item--702c00a1-9879-4d84-8ada-9c08739cec52" data-tab-item="702c00a1-9879-4d84-8ada-9c08739cec52">
<h3 class="tab__item__title">eaque ut libero</h3>
Nulla velit voluptatem corporis. Ipsam numquam molestiae expedita libero illo dolorem sed hic unde. Voluptatem ut eos aut. Pariatur illo quos fuga aut recusandae occaecati. Est nihil velit ea dignissimos.
</div>
<div class="tab__item tab__item--9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225" data-tab-item="9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225">
<h3 class="tab__item__title">quia necessitatibus est</h3>
In unde alias officiis. Consequatur minima voluptatum omnis consequatur. Aspernatur vero quod repudiandae sint illo officiis. Maxime sint illum exercitationem beatae minima voluptatem. Animi excepturi officia laboriosam aut qui harum consequuntur placeat sit.
</div>
<div class="tab__item tab__item--c3192444-f8cc-4b3c-b4ec-aeb4fadb6954" data-tab-item="c3192444-f8cc-4b3c-b4ec-aeb4fadb6954">
<h3 class="tab__item__title">ut odit dolores</h3>
Molestiae ab cumque. Dignissimos voluptas esse. Voluptatem beatae dolor quia tempore non reiciendis tenetur. Natus amet est delectus aut aperiam officia perferendis molestias quod. Animi culpa nulla sunt dolorem itaque.
</div>
</div>
</div>
<div class="{{modifier 'tab' modifiers}}" data-tab="{{ tab.uuid }}">
<div class="tab__navigation button-group">
{{#each tab.nav }}
<button class="{{modifier 'button' modifiers}}" data-tab-for={{ uuid }}>
<span>{{ text }}</span>
</button>
{{/each}}
</div>
<div class="tab__items">
{{#each tab.tabs }}
<div class="tab__item tab__item--{{ uuid }}" data-tab-item="{{ uuid }}">
<h3 class="tab__item__title">{{ title }}</h3>
{{ content }}
</div>
{{/each}}
</div>
</div>