Dynamic Checkbox Filter Bar Without Page Refresh

I would like to design a web page which plots data from an SQL database and allows the user to filter the input according to selections from check boxes, which are driven by data in the database.

Before I continue, I realise this website isn't meant for people to solve open ended problems like my statement above. I'm not looking for that. There is just one part I'm stuck with, hence my post. Keep reading and I'll explain...

Ok, I currently have a website on an intranet page which pulls data from an SQL server and plots the data using plotly.js. This works fine however it currently operates via the user submitting html forms which (a) refreshes the page and (b) isn't how I would like it to operate. I would like to have the page displayed as a series of check boxes on the left hand side, which are fed from the presence (or absence) or data found in the database. These checkboxes would sit in categories in an 'accordion' style list, much like the one featured on this page (https://www.w3schools.com/w3css/w3css_sidebar.asp).

So, I can easily write some PHP to query the database and create checkboxes according to the response of a SQL SELECT query. I can also easily write some code to loop through the check boxes to establish which are checked. The response to this would then be used to design a complex SELECT query which then feeds data to the ploty.js code. All this is relatively easy but I'm mentioning it to set the scene.

This is the part I'm stuck with. I want this page to react instantly to when a user checks a checkbox. On the selection I want the page to do two things:

1. Disable checkboxes which are no longer valid based on the users current selections. What do i mean by this? Let's assume that the SQL database contains data on cakes, biscuits and fruit. Within each of these categories, there are several sub categories e.g. cake-sponge, cake-chocolate, cake-jam, biscuit-chocolate, biscuit-lemon, fruit-strawberry, fruit-banana, fruit-grapefruit. Initially all categories are available since the user has not selected anything. When the user checks the 'cake' checkbox, I would like the remaining check boxes (e.g. biscuit, fruit and all the non-cake related sub checkboxes e.g lemon, strawberry, banana, grapefruit) to be disabled. I want to keep them visible since the user may later change their mind on the filter but I want the user to not be able to select checkboxes which are not relevant.

2. Refresh the SQL SELECT query which feeds the plotly.js plot and update the plot.

The first of these I can achieve by refreshing the page and looping over the checkboxes shown and disabling them accordingly. The second I can again do by refreshing the page. However, I would like to do them without refreshing the page. I'm sure this is do-able since it seems to be how most of the faceted filters appear to work e.g. www.skyscanner.net

Any advice on how I can do this without refreshing the page would be much appreciated. All I'm looking for is the name of a technique I can research or a rough idea, not a working solution.

Thanks for your help in advance