Triggering Liquid content via JS or JQuery (so that JS variables can be included in the Liquid)

I have very little Liquid experiecne, so apologies if this answer should be obvious.

I am building a store (through BigCartel, not Shopify, though both used Liquid). I want to be able to filter the contents of the product page based on categories, but the “selected” categories will be determined via JS, based on elements clicked in the DOM

The following would build the list of all products for example

<div class="product-list">
   {% for product in products %}
   <div class="product">
      <a href="{{ product.url }}">
         {{ product.name }}
      </a>
      ...

Whereas changing the liquid to {% for product in category.products %} would build a list of only the products within a specific category.

Now, the page these are on may or may not have a URL query (mysite.com/products?filter=category) which would be used in the Liquid to determine whether to show all products or whether to show only a specific category. I figure I would need to completely rebuild the entire list in the DOM each time it changes.

But what I can’t figure out is, how do I get that URL query (or lack thereof) to the Liquid code?

I can’t seem to find a way to run a script at the top of the page that would grab it for the Liquid later, as there doesn’t seem to be a way to preserve a variable in the liquid as far as I can tell.

I also can’t find a way to fully put all the Liquid and HTML in a script so that I could say, on $("li.filter").click just empty and replace the HTML of .product-list with the filtered results

My understanding from some reading is that Liquid is triggered at load of HTML, before all the scripts would be run. So how I can I achieve the result I’m looking for; replacing a page element with information grabbed from Liquid?