Isotope Issues

[54Brands]

Hi, I am having an issue with isotope where it is displaying the same post items exactly 16 times (which matches my filter count) before showing the next items and only when "All Topics" is selected. When selecting each filter, it displays the same post items and in the same order for each.

Hoping someone can provide some guidance. 

<div id="filters" class="button-group filter-items">
      {% set my_topics = blog_topics('default', 20) %}
      <button class="button is-checked" data-filter="*">All Topics</button>
      {% for item in my_topics %}
      <button class="button" data-filter=".{{item.slug}}">{{item}}</button>
      {% endfor %}
    </div>
    
    <div class="post-listing isotope">
      {% set posts = blog_recent_posts('default', 100 ) %}
      {% set my_topics = blog_topics('default', 20) %}
        {% for post in posts %}
           {% if loop.index > 1 %}
              {% for item in my_topics %}
                <div class="post-item {{item.slug}}">

                  <article class="blog-index__post-wrapper">
                    <div class="blog-index__post">
                      {% if post.post_list_summary_featured_image %}
                      <a class="blog-index__post-image" href="{{ post.absolute_url }}">
                        <img src="{{ post.post_list_summary_featured_image }}" class="" alt="{{ post.featured_image_alt_text | escape }}">
                      </a>
                      {% endif %}
                      <div class="blog-index__post-content">
                        <div>
                          {% set featured_tag = post.topic_list | first %}
                          {% if featured_tag %}
                            <span class="blog-index__post-preheader">{{ featured_tag }}</span>
                          {% endif %}
                          <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
                          {% if content_group.show_summary_in_listing %}
                            <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
                          {% endif %}
                        </div>
                        <a class="more-link" href="{{ post.absolute_url }}">Read More</a>
                        <div class="blog-index__post-meta" style="display:none">
                          <span class="blog-index__post-author">
                            {{ post.blog_post_author }}
                          </span>
                          <span class="blog-index__post-date">
                            {{ post.publish_date | datetimeformat('%b %e, %Y') }}
                          </span>
                        </div>
                      </div>

                    </div>
                  </article>
                </div>
              {% endfor %}
            {% endif %}
        {% endfor %}
    </div>

[54Brands]

I was able to sort out the repetitive listing by moving {% for item in my_topics %} above {% for post in posts %}

Still needing guidance on the filtering as it still shows the same items for every filter. 

[54Brands · Accepted solution]

For those who may need the solution for this, @jmclaren provided me the resolution. A BIG THANK YOU! The loop code should look like the following: 

<div class="post-listing isotope">
     
      {% set posts = blog_recent_posts('default', 100 ) %} {# grab 100 of the most recent posts from default blog regardless of their topic #}

          {% for post in posts %} {# for each post in the list of 100 posts regardless of their tag #}

             {% if loop.index > 1 %} {# skip the first post out of 100 #}
                {% set post_tag_slugs = [] %}
                {% for tag in post.topic_list %}
                  {% do post_tag_slugs.append(tag.slug) %}
                {% endfor %}

                  <div class="post-item {% for tag_slug in post_tag_slugs %}{{ tag_slug }} {% endfor %}"> {# add all of the topic slugs for all of the topics this post is in #}

                    <article class="blog-index__post-wrapper">
                      <div class="blog-index__post">
                        {% if post.post_list_summary_featured_image %}
                        <a class="blog-index__post-image" href="{{ post.absolute_url }}">
                          <img src="{{ post.post_list_summary_featured_image }}" class="" alt="{{ post.featured_image_alt_text | escape }}">
                        </a>
                        {% endif %}
                        <div class="blog-index__post-content">
                          <div>
                            {% set featured_tag = post.topic_list | first %}
                            {% if featured_tag %}
                              <span class="blog-index__post-preheader">{{ featured_tag }}</span>
                            {% endif %}
                            <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
                            {% if content_group.show_summary_in_listing %}
                              <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
                            {% endif %}
                          </div>
                          <a class="more-link" href="{{ post.absolute_url }}">Read More</a>
                        </div>
                      </div>
                    </article>
                    
                  </div>
               {% endif %}
           {% endfor %}
    
    </div>