Duplicate classes after using foreach - php

Question

I use a foreach to print out an attachment_image from a blog post. But for some reason a button duplicates the amount of posts and I dont know what I am doing wrong.
I am using sage 10 with bootstrap 5:
#php
$images =& get_children( array (
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image'
));
#endphp
<section class="masonry-grid">
<div class="container masonry__container">
<div class="masonry__items">
<div class="item masonry__item">
<div class="masonry__images">
#if ( empty($images) )
#else
#foreach ( array_unique($images) as $attachment_id => $attachment )
<div class="masonry__image">
{!! wp_get_attachment_image( $attachment_id, false ) !!}
</div>
#endforeach
#endif
</div>
<div class="masonry__info">
<div class="masonry__category">
{{ get_the_category( $id )[0]->name }}
</div>
<div class="masonry__title">
<a href="{{ get_permalink() }}">
{!! $title !!}
</a>
</div>
</div>
<div class="masonry__socials">
<div class="masonry__social">
<div classs="masonry__authors">
<i class="fas fa-at"></i><span class="masonry__author">#include('partials/entry-meta')</span>
</div>
<div class="masonry__views">
<i class="fas fa-eye"></i><span class="masonry__author">149 views</span>
</div>
<div class="masonry__likes">
<i class="far fa-thumbs-up"></i><span class="masonry__author">8 likes</span>
</div>
</div>
</div>
</div>
</div>
<div class="masonry__buttons">
<div class="masonry__loadmore">
<button type="button" class="masonry__button btn btn-outline-secondary"><i class="fas fa-spinner"></i>Load more</button>
</div>
</div>
</div>
</section>
I intend to display multiple items and a single button, yet, instead of the behavior I expect, as many buttons are displayed as many items there are.