title: Ajax filtering with WP Query inside foreach loop
body: <p>I am trying to make a calendar to display classes on a per day basis in hourly order. </p>
  
  <p>My initial query to display all results works as expected. I have a foreach loop based on a Day taxonomy which returns Monday – Sunday as seven lists. Within the loop there is a WP_Query returning all classes for each specific day using <code>tax_query &gt; $day-&gt;term_id</code> and listing them underneath the specific day name their associated with.</p>
  
  <p>There is a filter based on radio buttons which filters the query based on a class types taxonomy. The idea is to filter the posts, but still display the results within the week forloop (hope that makes sense). </p>
  
  <p>I am using Axios to perform a <code>POST</code> request which seems to be working, it returns <code>200</code> and the results on the frontend change, the problem is the results aren't correct. When the results are filtered it seems to just display all posts under Monday rather than just the required results under each specific day. I assume the problem lies in the query being in a foreach loop (with i've not done before). If anyone can point out where i'm going wrong/put me on the right path that would be a greta help :) </p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>**Class calendar foreach loop and WP_Query**
  
      &lt;?php
      `$calendarDays = get_terms('calendar-day');`
  
      `echo '&lt;div class="classes-calendar"&gt;';`
  
  
  
       `$classesFilter = array_map(function($class) {`
          `return [
            'value' =&gt; $class-&gt;term_id, 
            'title' =&gt; $class-&gt;name
          ];
        }, get_terms('calendar-class-type'));`
  
    `get_part('classes-filter', [
      'id' =&gt; 'classes-filter',
      'title' =&gt; 'All',
      'items' =&gt; array_merge( $classesFilter )
    ]);`
  
   ` echo '&lt;div id="response" class="container"&gt;';`
  
      foreach ($calendarDays as $day):
  
        echo '&lt;div class="classes-col"&gt;';
        echo '&lt;strong&gt;' . $day-&gt;name . '&lt;/strong&gt;';
        echo '&lt;ul&gt;';
  
        $args = array(
          'post_type' =&gt; 'calendar',
          'tax_query' =&gt; array(
            array(
              'taxonomy' =&gt; 'calendar-day',
              'field' =&gt; 'id',
              'terms' =&gt;  $day-&gt;term_id,
            )
          ),
          'meta_key' =&gt; 'classes_entry_start_time',
          'orderby' =&gt; 'meta_value_num',
          'order' =&gt; 'ASC'
        );
  
        $query = new WP_Query( $args );
  
        if( $query-&gt;have_posts() ):
  
          while( $query-&gt;have_posts() ):
          $query-&gt;the_post();
  
          get_part('classes-item', ['classesEntry' =&gt; get_field('classes_entry')]);
  
          endwhile;
  
        echo '&lt;/ul&gt;';
        echo '&lt;/div&gt;'; // END classes-col
  
        else:
          echo 'Sorry but something went wrong.';
        endif;
  
      endforeach;
  
    `echo '&lt;/div&gt;'; // END container`
  `echo '&lt;/div&gt;'; // END classes-calendar`
  
  `echo '&lt;div class="container section"&gt;&lt;div class="center"&gt;&lt;a href="#" class="btn"&gt;Book class&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';`
  
  `wp_reset_query();`
  
  
  **Ajax handler**
  
  
      function class_type_ajax() {
  
    `$calendarDays = get_terms('calendar-day');`
  
      foreach ($calendarDays as $day):
  
        echo '&lt;div class="classes-col"&gt;';
        echo '&lt;strong&gt;T ' . $day-&gt;name . '&lt;/strong&gt;';
        echo '&lt;ul&gt;';
  
        $args = array(
          'post_type' =&gt; 'calendar',
          'tax_query' =&gt; $tax,
          'meta_key' =&gt; 'classes_entry_start_time',
          'orderby' =&gt; 'meta_value_num',
          'order' =&gt; 'ASC',
          'post_per_page' =&gt; '1'
        );
  
        $test = $day-&gt;term_id;
  
        if(isset($test)) {
          $tax[] = array(
            'taxonomy' =&gt; 'calendar-day',
            'field' =&gt; 'name', // id
            'terms' =&gt; $test, //  $day-&gt;term_id,
          );
        }
  
        if(isset($_POST['classType'])) {
          $tax[] = array(
            'taxonomy' =&gt; 'calendar-class-type',
            'field' =&gt; 'id',
            'terms' =&gt; $_POST['classType']
          );
        }
  
        $query = new WP_Query( $args );
  
        if( $query-&gt;have_posts() ):
  
          while( $query-&gt;have_posts() ):
          $query-&gt;the_post();
  
          get_part('classes-item', ['classesEntry' =&gt; get_field('classes_entry')]);
  
          endwhile;
  
        echo '&lt;/ul&gt;';
        echo '&lt;/div&gt;'; // END classes-col
  
        else:
          echo 'Sorry but something went wrong.';
        endif;
  
      endforeach;
  
      die();
  `}`
  
  `add_action('wp_ajax_class_type_filter', 'class_type_ajax');
  add_action('wp_ajax_nopriv_class_type_filter', 'class_type_ajax');`
  
  **Ajax**
  
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    import axios from 'axios';
  
      const loadmore = () =&gt; {
  
        const el = document.querySelector('#classes-filter');
  
        if (el) {
  
          el.addEventListener('change', e =&gt; {
            e.preventDefault();
  
            let formData = new FormData();
  
            formData.append('action', 'class_type_filter');
            formData.append('security', WP.security);
  
            // Axios POST request
            axios({
              method: 'POST',
              url: WP.ajax,
              data: formData,
            })
              // handle success
              .then(function (response) {
                console.log(response.data);
                console.log(response.status);
                document.getElementById("response").innerHTML = response.data;
                WP.current_page++;
              },
                (error) =&gt; {
                  console.log(error);
                });
  
          });
  
        }
  
      };
  
      export default loadmore;</code></pre>
  </div>
  </div>
  
  </code></pre>