Multiple Load More OOB Button Sprig

I am trying to create multiple dynamic load more oob buttons using Sprig plugin in Craft CMS and they are appearing properly. But the issue comes up when one button is due to be swapped with the hidden one, it results to all the load more buttons disappearing.

Here is the for loop code that I have tested:

{% for city in cities %}
    {% set articleOffset = articleOffset ?? 0 %}
    {% set articlesQuery = cityArticles[loop.index0].offset(articleOffset).limit(articleLimit) %}
    {% set articles = articlesQuery.all() %}

    <div class="filtered-bookmark mb-5">
        <span> {{ city.title }}</span>
        <div class="row" id="container-{{ city.slug }}">
            {% for article in articles %}
                {% set featureImage = article.articleFeaturedImage.one().url ?? "" %}
                {% set categorySlug = article.channelsCategory.one().channel.one().slug %}

                <section class="col-12 col-sm-6 col-xl-4 mb-4">
                    {#article card template here#}
                </section>
            {% endfor %}
        </div>
        
        {% if articlesQuery.count() > articles|length + articleOffset %}
            <button id="{{city.slug}}-oob" sprig  
                s-val:articleOffset="{{ articleOffset + articleLimit }}" 
                s-target="#container-{{ city.slug }}" 
                s-select="#container-{{ city.slug }} section"
                s-swap="beforeend"
                {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }}> View More </button>
        {% else %}
            <button id="{{ city.slug }}-oob" s-swap-oob="true" style="display: none"></button>
        {% endif %}
    </div>
{% endfor %}

Asked the question on PutYourLightsOn's Sprig GitHub and got a response. This did the trick:

<button id="{{ city.slug }}-oob" {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }} style="display: none"></button>

GitHub link for reference: https://github.com/putyourlightson/craft-sprig/issues/247