Problem with php. What is the correct way to implement or bind a div?

Question

JavaScript

Stuck specifically. I can not understand. I want the data output to happen on one page. Data is pulled from the database using PHP (MS SQL 2012). In general, as if all processing and output using php. How to make it so that the data that is unloaded once. Stayed in place all the time? Duplicate a query for each page? (stupidity yes :D) And how to make the div work together so that the menu on the left is static (navigation)? In general, it should look something like this:
The only thing that should be updated is when a group is selected, instead of the "group" table itself "A progress table should appear. Thanks in advance!

Answer 1

Put debugger on the second line and debug via chrome dev tools

Answer 2

Duplicate request for each page? (stupidity yes :D)

This is http...
Actually the answer will be "No, not stupidity! :D"
Shl. Read about http principles and what sockets are.

Answer 3

What you are looking for is called SPA. Specifically for working with the database - it makes sense to cache the results of frequent fetches.