customized submit sorts – On click on some ingredient i wish to use some template

I’ve a web page that calls the template, I made filters utilizing a data-filter.These filters type out the ALU door and PVC doorways. Nonetheless after I click on on the pagination and goes to web page 2 to record the opposite 10 merchandise the filter returns to me on ALL. So I got here up with the concept to take a sure template on the click on of the filter. How do I try this? I watched this Dynamically swap template on click on nevertheless throw me error in console that may not discover multiTemplateData. Or whether or not it’s attainable to save lots of the filter and swap it additional?

This are filter buttons.

<div class="container py-5">
        <div class="section-title position-relative text-center">
            <h6 class="text-uppercase text-primary mb-3" model="letter-spacing: 3px;">Was wir haben</h6>
            <h1 class="font-secondary display-4">Katalog</h1>
        </div>

        <!-- FILTERS -->
        <div class="category-title">
            <p>Kategorien:</p>
        </div>
        <div class="filters" id="productsDoorsSelect" onclick="activeFunction(occasion)">  
            <span class="filter btn btn-primary text-uppercase active-products" data-filter="all">ALL</span>
            <span class="filter btn btn-primary text-uppercase" data-filter="alu">alu</span>
            <span class="filter btn btn-primary text-uppercase" data-filter="pvc">pvc</span>
        </div>
        <!-- FILTERS -->    

    </div>

This are merchandise:

<!-- PRODUCTS DOORS -->
    <div class="container py-5 initiatives">
        <div class="flex-products">
            <div class="row-products" id="doorsProducts" >
            <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $productsQuery = new WP_Query (array(
                    'post_type' => 'products_catalog',
                    'posts_per_page' => 10,
                    'paged' => $paged
                ));
                if($productsQuery->have_posts()):
                    whereas($productsQuery->have_posts()):
                        $productsQuery->the_post();     
            ?>
                <div class="col-lg-4-products mb-3 challenge" data-filter="<?php the_field('doors_category_field') ?>">
                    <div class="product-item mb-2">
                        <div class="product-img">
                            <img class="img-fluid" src="<?php the_post_thumbnail_url() ?>" alt="">
                            <a sort="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong<?php the_title()?>">
                                <i class="fa fa-2x fa-plus text-white"></i>
                            </a>
                        </div>
                        <div class="bg-secondary text-center p-4">
                            <h3 class="m-0"><?php the_title() ?></h3>
                        </div>
                    </div>
                </div>
                <?php endwhile; ?>
            
            </div>
            
            <div class="products-paginate">
            <?php 
            echo paginate_links(array(
                'whole' => $productsQuery->max_num_pages,
                'prev_text' => '« früher',
                'next_text' => 'Nächste »'
            )); 
            ?>
            </div>
            
            <?php endif; ?>
        </div>
    </div>
    <!-- PRODUCTS DOORS -->

That is modal on opening merchandise to point out extra data

<!-- Modal -->
    <?php
        $productsQuery = new WP_Query (array(
            'post_type' => 'products_catalog',
            'posts_per_page' => 10,
            'paged' => $paged
        ));
        if($productsQuery->have_posts()):
            whereas($productsQuery->have_posts()):
                $productsQuery->the_post();     
    ?>
    <div class="modal fade" id="exampleModalLong<?php the_title() ?>" tabindex="-1" position="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" position="doc">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"><?php the_title() ?></h5>
                    <button sort="button" class="shut" data-dismiss="modal" aria-label="Shut">
                        <span aria-hidden="true">&instances;</span>
                    </button>
                </div>
                <div class="modal-body">
                

                    <?php the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid mb-4']); ?>
                    <?php the_content();?>
                </div>
            </div>
        </div>
    </div>
    <?php endwhile; endif; ?>
    <!-- Modal -->