Adding class on click

I made a JS script to add class when clicked either of these div below but it seems this app prevent it.

<div class="ais-range-slider--header ais-facet--header ais-header">Price</div>
<div class="ais-refinement-list--header ais-facet--header ais-header">Type</div>
<div class="ais-refinement-list--header ais-facet--header ais-header">Price range</div>
<div class="ais-refinement-list--header ais-facet--header ais-header">Tags</div>

Any idea?
My alternative is to manually create a block of html inside hogan template but I don’t have idea on how to query to refined facets.

Please admin help.

Could you share with us the code you used to have this action on click?

Thanks for the reply.
Here is the JS code currently saved in algolia_instant_search.js.liquid:

$('.ais-refinement-list--header, .ais-range-slider--header').on('click', function () {
  //statement here...
});

Actually we have some blocks of facet/filter customization here and it’s working fine but the default blocks generated by Algolia apps like I mentioned in the question can’t be over written by custom JS.

See screenshot below
accordion

The blocks I mentioned in the question are not collapsable because the script not work only for that blocks

Does it work if you replace it with

$('body').on('click', '.ais-refinement-list--header, .ais-range-slider--header', function () {
  //statement here...
});

If this works for you, the reason for your previous code not working is that the instantsearch.js library will re-render the whole HTML everytime a search is ran (including on page load).
The change to this code is plugging an event listener on a parent component, which will not be removed.

Here’s a related topic:

If your goal is to be able to collapse those menus, you might however simply want to add the collapsible parameter to all facets in algolia_facets.js.liquid.
See https://community.algolia.com/instantsearch.js/v1/documentation/#refinementlist for more information.