title: AJAX button toggle works only once until page refresh
body: <p>I have a button that allows users to &quot;favorite&quot; or &quot;unfavorite&quot; a post. Clicking it should toggle between the two states (by adding or removing the post ID from a user's repeater field). The function works, but only once until the page is refreshed, then it will work once again. I cannot figure out how to make it work repeatedly without a page refresh.</p>
  <p>It seems as though, if a post is not favorited, clicking the button will favorite the page, then clicking it again will keep trying to favorite it. Only when the page is reloaded does the button recognize that it is already favorited and then will run the unfavorite function.</p>
  <p>I'm sure there is something simple I am overlooking, but I can't figure out what it is. Any help is much appreciated!</p>
  <p>Here is the code for the button in my PHP template:</p>
  <pre><code>&lt;div id=&quot;favorites&quot;&gt;
      &lt;?php
      // Favorited indicator
      // Check if the user has any saved Favorites. If so, loop through them and if there are any matches, change the favorite heart icon to pink.
      if (have_rows('my_favorites', $currentUserID)) :
          while (have_rows('my_favorites', $currentUserID)) : the_row();
              $favorite_post_id = get_sub_field('post_id');
              $favorite_name = get_field('name', $favorite_post_id);
              // If the post ID exists
              if ($favorite_post_id == $post_ID) {
                  array_push($check_favorites_array, 'yes');
              } else {
                  array_push($check_favorites_array, 'no');
              }
          endwhile;
      endif;
      $post = get_post();
      $favorite_class = '';
      $nonce = wp_create_nonce('add_remove_dog_from_favorites_nonce');
      $link = '';
      if (in_array('yes', $check_favorites_array)) {
          $link = admin_url('admin-ajax.php?action=remove_dog_from_favorites&amp;post_id=' . $post-&gt;ID . '&amp;nonce=' . $nonce);
          $favorite_class = 'is-favorite';
      } else {
          $link = admin_url('admin-ajax.php?action=add_dog_to_favorites&amp;post_id=' . $post-&gt;ID . '&amp;nonce=' . $nonce);
          $favorite_class = 'not-favorite';
      }
      ?&gt;
      &lt;a href=&quot;&lt;?php echo $link; ?&gt;&quot; data-post_id=&quot;&lt;?php echo $post-&gt;ID ?&gt;&quot; data-nonce=&quot;&lt;?php echo $nonce; ?&gt;&quot; data-user_id=&quot;&lt;?php echo $currentUserID ?&gt;&quot; class=&quot;favorite-toggle &lt;?php echo $favorite_class ?&gt;&quot; id=&quot;favorite-toggle&quot;&gt;
          &lt;i class=&quot;fas fa-heart&quot;&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the functions' code:</p>
  <pre><code>/ define the actions for the two hooks created, first for logged in users and the next for logged out users
  add_action('wp_ajax_add_dog_to_favorites', 'add_dog_to_favorites');
  add_action('wp_ajax_nopriv_add_dog_to_favorites', 'login_to_add_to_favorites');
  
  // define the function to be fired for logged in users
  function add_dog_to_favorites()
  {
  
      // nonce check for an extra layer of security, the function will exit if it fails
      if (!wp_verify_nonce($_REQUEST['nonce'], 'add_remove_dog_from_favorites_nonce')) {
          exit('Woof Woof Woof');
      }
  
  
      $post_id = $_REQUEST['post_id'];
      $user_id = $_REQUEST['user_id'];
      $row = array(
          'post_id'       =&gt; $post_id
      );
  
      $contains_row = false;
  
      if (have_rows('my_favorites', $user_id)) :
          while (have_rows('my_favorites', $user_id)) : the_row();
              $sub_value = get_sub_field('post_id');
              if ($sub_value == $post_id) {
                  $contains_row = true;
              }
          endwhile;
          if ($contains_row == false) {
              add_row('my_favorites', $row, $user_id);
          }
      endif;
      $contains_row = false;
  
  
  
      // If the above action fails, result type is set to 'error' and like_count set to old value, if success, update to new_like_count
      if ($post_id === false) {
          $result['type'] = 'error';
          // $result['like_count'] = $like_count;
      } else {
          $result['type'] = 'success';
          // $result['like_count'] = $new_like_count;
      }
  
      // Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
      if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
          $result = json_encode($result);
          echo $result;
      } else {
          header(&quot;Location: &quot; . $_SERVER['HTTP_REFERER']);
      }
  
      // don't forget to end your scripts with a wp_die() function - very important
      wp_die();
  }
  
  // define the functtion to be fired for logged out users
  function login_to_add_to_favorites()
  {
      echo 'You must log in to like';
      wp_die();
  }
  
  // used here only for enabling syntax highlighting. Leave this out if it's already included in your plugin file.
  
  // Fires after WordPress has finished loading, but before any headers are sent.
  
  add_action('init', 'enqueue_add_dog_to_favorites_script');
  
  function enqueue_add_dog_to_favorites_script()
  {
      // Register the JS file with a unique handle, file location, and an array of dependencies
      wp_register_script('add_favorites_script', plugin_dir_url(__FILE__) . 'add_favorites_script.js', array('jquery'));
  
      // localize the script to your domain name, so that you can reference the url to admin-ajax.php file easily
      wp_localize_script('add_favorites_script', 'myAjax', array('ajaxurl' =&gt; admin_url('admin-ajax.php')));
  
      // enqueue jQuery library and the script you registered above
      wp_enqueue_script('jquery');
      wp_enqueue_script('add_favorites_script');
  }
  
  
  
  
  /**
   * Remove Dog from Favorites
   */
  
  // define the actions for the two hooks created, first for logged in users and the next for logged out users
  add_action('wp_ajax_remove_dog_from_favorites', 'remove_dog_from_favorites');
  add_action('wp_ajax_nopriv_remove_dog_from_favorites', 'login_to_remove_dog_from_favorites');
  
  // define the function to be fired for logged in users
  function remove_dog_from_favorites()
  {
  
      // nonce check for an extra layer of security, the function will exit if it fails
      if (!wp_verify_nonce($_REQUEST['nonce'], 'add_remove_dog_from_favorites_nonce')) {
          exit('Woof Woof Woof');
      }
  
  
      $post_id = $_REQUEST['post_id'];
      $user_id = $_REQUEST['user_id'];
  
  
  
      if (have_rows('my_favorites', $user_id)) :
          while (have_rows('my_favorites', $user_id)) : the_row();
              $sub_value = get_sub_field('post_id');
              if ($sub_value == $post_id) {
                  delete_row('my_favorites', get_row_index(), $user_id);
              }
          endwhile;
      endif;
  
  
  
      // If the above action fails, result type is set to 'error' and like_count set to old value, if success, update to new_like_count
      if ($post_id === false) {
          $result['type'] = 'error';
          // $result['like_count'] = $like_count;
      } else {
          $result['type'] = 'success';
          // $result['like_count'] = $new_like_count;
      }
  
      // Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
      if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
          $result = json_encode($result);
          echo $result;
      } else {
          header(&quot;Location: &quot; . $_SERVER['HTTP_REFERER']);
      }
  
      // don't forget to end your scripts with a wp_die() function - very important
      wp_die();
  }
  
  // define the functtion to be fired for logged out users
  function login_to_remove_dog_from_favorites()
  {
      echo 'You must log in to like';
      wp_die();
  }
  </code></pre>
  <p>And my Jquery:</p>
  <pre><code>jQuery(document).ready(function () {
    jQuery(&quot;.not-favorite&quot;).on(&quot;click&quot;, function (e) {
      e.preventDefault();
      buttonLike = jQuery(&quot;.is-favorite&quot;);
      post_id = jQuery(this).attr(&quot;data-post_id&quot;);
      nonce = jQuery(this).attr(&quot;data-nonce&quot;);
      user_id = jQuery(this).attr(&quot;data-user_id&quot;);
      jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: myAjax.ajaxurl,
        data: {
          action: &quot;add_dog_to_favorites&quot;,
          post_id: post_id,
          nonce: nonce,
          user_id: user_id,
        },
        success: function (response) {
          if (response.type == &quot;success&quot;) {
            console.log(&quot;success!&quot;);
            // const button = document.querySelector('.not-favorite');
            // button.classList.remove('not-favorite');
            // button.classList.add('is-favorite');
  
            // jQuery(&quot;#favorites&quot;).load(' #favorites');
            jQuery(&quot;#favorite-toggle&quot;).removeClass(&quot;not-favorite&quot;);
            jQuery(&quot;#favorite-toggle&quot;).addClass(&quot;is-favorite&quot;);
            linkText = jQuery(&quot;#favorite-toggle&quot;).prop(&quot;href&quot;);
            newLinkText = linkText.replace(
              &quot;add_dog_to_favorites&quot;,
              &quot;remove_dog_from_favorites&quot;
            );
            jQuery(&quot;#favorite-toggle&quot;).attr(&quot;href&quot;, newLinkText);
          } else {
            alert(&quot;Your like could not be added&quot;);
          }
        },
      });
    });
  
    jQuery(&quot;.is-favorite&quot;).on(&quot;click&quot;, function (e) {
      e.preventDefault();
      buttonLike = jQuery(&quot;.not-favorite&quot;);
      post_id = jQuery(this).attr(&quot;data-post_id&quot;);
      nonce = jQuery(this).attr(&quot;data-nonce&quot;);
      user_id = jQuery(this).attr(&quot;data-user_id&quot;);
      jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: myAjax.ajaxurl,
        data: {
          action: &quot;remove_dog_from_favorites&quot;,
          post_id: post_id,
          nonce: nonce,
          user_id: user_id,
        },
        success: function (response) {
          if (response.type == &quot;success&quot;) {
            console.log(&quot;success!&quot;);
            // var button = document.querySelector('.is-favorite');
            // button.classList.remove('is-favorite');
            // button.classList.add('not-favorite');
  
            // jQuery(&quot;#favorites&quot;).load(' #favorites');
            jQuery(&quot;#favorite-toggle&quot;).removeClass(&quot;is-favorite&quot;);
            jQuery(&quot;#favorite-toggle&quot;).addClass(&quot;not-favorite&quot;);
            linkText = jQuery(&quot;#favorite-toggle&quot;).prop(&quot;href&quot;);
            newLinkText = linkText.replace(
              &quot;remove_dog_from_favorites&quot;,
              &quot;add_dog_to_favorites&quot;
            );
            jQuery(&quot;#favorite-toggle&quot;).attr(&quot;href&quot;, newLinkText);
          } else {
            alert(&quot;Your like could not be added&quot;);
          }
        },
      });
    });
  });
  </code></pre>