I have a custom search form with the following:

• Search
• Sort By
• 5x Custom taxonomy filters
• Reset

I am using ajax.

To improve usability, I would ideally like to hide the custom taxonomy filters on page load and add an “Advanced” button. When clicked, this button would display the hidden filters.

Right now I am merely trying to add <li class="toggle-advanced"><button>Advanced Search</button></li> after the Sort by filter. Per this ticket, I am adding this both on the document load and the ajaxfinish event, like so:

jQuery(document).ready(function() {
  $('li.sf-field-sort_order').after('<li class="toggle-advanced"><button>Advanced Search</button></li>');
});
jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  $('li.sf-field-sort_order').after('<li class="toggle-advanced"><button>Advanced Search</button></li>');
});

While this works on page load, when I update the filters, the reset button is duplicated.

I have multiple methods, including wrapping the hidden filters in <li><button>Advanced Search</button><ul> ...</ul></li> with .wrapAll() however that has even wonkier results with each filter updates in that certain filter just disappear.

Wondering if there is a simple solution for this.