loop – Displaying posts after ajax filtering

I’m fairly new to to this and struggling to get things working the way I want. Hope you can help 🙂

I have a custom post archive page displaying art pieces. The user can filter which pieces are shown by clicking a category or tag. If no filter is selected, all art pieces are shown. When the user clicks on an art piece, a modal with a slider appears. The slider has all the art pieces in it.

This all works well, until the user clicks an art piece shown after choosing a filter option. The slider then contains all art pieces, as opposed to only the pieces belonging to the chosen filter. For the life of me, I cannot figure out how to only show the filtered pieces in the slider, if a filter has been chosen. I hope someone can point out what and where I’m going wrong.

Here is my code:
Archive page:

     <main>

       <div class="grid-x">

  <!-- Filters -->
<div class="cell small-12 large-2">
  <aside class="filters">
    <a class="filter">
      <i class="fas fa-chevron-down"></i>Filter
    </a>
    <div class="categories" id="filter-btns">
      <ul>
        <li class="filter-category filter-tag">
          <a>Alle</a>
        </li>
        <?php // GET THE CATEGORIES
        $args = array(
          'exclude' => array(1),
          'post_type' => 'werk',
        );
        $cats = get_categories($args);
        foreach ($cats as $cat) : ?>

        <li class="filter-category"><a data-category="<?= $cat->cat_ID; ?>"><?= $cat->name; ?></a></li>
      <?php endforeach; ?>

      <?php // GET THE TAGS
      $args = array(
        'post_type' => 'werk',
      );

      $tags = get_tags($args);

      foreach ($tags as $tag) : ?>
      <li class="filter-tag"><a data-tag="<?= $tag->term_taxonomy_id; ?>"><?= $tag->name; ?></a></li>
    <?php endforeach; ?>
      </ul>

    </div>
  </aside>
</div>

<div class="cell small-12 large-10">
  <div class="masonry-css js-filter">
    <?php

    $args = array (
      'post_type' => 'werk',
      'posts_per_page' => -1,
    );

    $query = new WP_Query($args);

      if ( $query->have_posts() ) :
            while ( $query->have_posts() ) :
                $query->the_post();?>
            <div class="masonry-css-item slide-item" id="werk_<?= get_the_ID(); ?>">
              <div class="work" data-open="workModal">

                <a>

                  <img src="https://wordpress.stackexchange.com/<?= get_field("afbeelding'); ?>" class="" height="" width="" alt="">
                  <div class="hover-work-item">
                    <h2><?= the_title(); ?></h2>
                    <h3><?= get_field('year'); ?></h3>
                  </div>
              </a>
              </div>
            </div>
            <?php endwhile;
          endif;
      wp_reset_query(); ?>
  </div>

  <div class="large reveal" id="workModal" data-reveal>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true"><i class="fas fa-times"></i></span>
    </button>

    <div class="work-slider">
      <?php if ( have_posts() ) :

            while ( have_posts() ) :
                the_post();

                <?php $posttags = get_the_tags(); ?>

                <div class="slide-container">
                  <div class="slide-item">
                    <div class="img-container">
                      <img src="https://wordpress.stackexchange.com/<?= get_field("afbeelding'); ?>" class="" height="" width="" alt="">
                    </div>
                    <div class="work-info">
                      <h2><?= the_title(); ?></h2>
                      <h3><?= get_field('year'); ?></h3>
                      <p><?php
                        if ($posttags) {
                          foreach ($posttags as $posttag) {
                            echo $posttag->name . ' ';
                          }
                        }
                      ?></p>
                      <?php if ( get_field('afmeting')) :?>
                        <p><?= get_field('afmeting') ?>cm x <?= get_field('afmeting-hoogte') ?>cm</p>
                      <?php endif; ?>
                      <a href="<?= get_home_url()?>/contact" class="btn">Vraag meer informatie</a>
                    </div>
                  </div>
                </div>

            endwhile;

        endif;
        ?>
    </div>
    <!-- SLIDER ARROWS -->
    <div class="slide-arrows">
      <a href="#" class="prev"><i class="fas fa-chevron-left"></i></a>
      <a href="#" class="next"><i class="fas fa-chevron-right"></i></a>
    </div>

</div>

I’m using ajax to filter the posts (filters.js):

// FILTER CATEGORY
$('.filter-category > a').on('click', function(e){

  e.preventDefault();

  var category = $(this).data('category');

  $.ajax({
    url: wpAjax.ajaxUrl,
    data: {action: 'filtercats', category: category },
    type: 'post',
    success: function(result) {
      $('.js-filter').html(result);
    },
    error: function(result) {
      console.warn(result);
    }
  });
});

// FILTER TAG
$('.filter-tag > a').on('click', function(e){
  e.preventDefault();

  var tag = $(this).data('tag');

  $.ajax({
    url: wpAjax.ajaxUrl,
    data: {action: 'filtertags', tag: tag },
    type: 'post',
    success: function(result) {
      $('.js-filter').html(result);
    },
    error: function(result) {
      console.warn(result);
    }
  });
});

And here is my query code, placed in ajax.php:

function jolandalinssen_filtercats() {

$category = $_POST('category');

$args = array(
  'post_type' => 'werk',
  'posts_per_page' => -1
);

if(isset($category)) {
  $args('category__in') = array($category);
}

$query = new WP_Query( $args );

if ( $query->have_posts() ) :
  while ($query->have_posts() ) : $query->the_post(); ?>

  <div class="masonry-css-item slide-item" id="werk_<?= get_the_ID(); ?>">
    <div class="work" data-open="workModal">
      <a>

        <img src="https://wordpress.stackexchange.com/<?= get_field("afbeelding'); ?>" class="" height="" width="" alt="">
        <div class="hover-work-item">
          <h2><?= the_title(); ?></h2>
          <h3><?= get_field('year'); ?></h3>
        </div>
      </a>
    </div>
  </div>

  <?php endwhile;
  wp_reset_query();

else :
  echo 'Er zijn geen werken gevonden';
endif;

die();
}

function jolandalinssen_filtertags() {

  $tag = $_POST('tag');

  $args = array(
    'post_type' => 'werk',
    'posts_per_page' => -1
  );

  if(isset($tag)) {
    $args('tag__in') = array($tag);
  }

  $query = new WP_Query( $args );

  if ( $query->have_posts() ) :
    while ($query->have_posts() ) : $query->the_post(); ?>

    <div class="masonry-css-item slide-item" id="werk_<?= get_the_ID(); ?>">
      <div class="work" data-open="workModal">
        <a>

          <img src="https://wordpress.stackexchange.com/<?= get_field("afbeelding'); ?>" class="" height="" width="" alt="">
          <div class="hover-work-item">
            <h2><?= the_title(); ?></h2>
            <h3><?= get_field('year'); ?></h3>
          </div>
        </a>
      </div>
    </div>

    <?php endwhile;
    wp_reset_query();

  else :
    echo 'Er zijn geen werken gevonden';
  endif;

  die();
}