kicken

There is a concept in design/engineering called Hysteresis.  In a nut shell, you don't define hard cut-off points and instead define a range, or introduce a delay of some sort.
So instead of having your code hide the menus when the container is <50 px from the top and show them when 50px or more from the top, you instead set it up such as:
If container is <50 px from the top, hide the menus If container is >150px from the top, show the menus. If the container is between 50px and 150px from the top, just maintain whatever the current state is. The range can be fixed like the example, or dynamic by calculating the menu heights.  You just need the range to be large enough that toggling the visibility of the menus doesn't cross both boundaries.
 
 

querySelectorAll returns a NodeList, which does not have an addEventListener method.  Assigning an event handler to a collection of elements is a jQuery thing.  In plain JavaScript, you have to loop over the elements in the collection and assign the event handler to each one individually, or attach it to a common parent element.
document.querySelectorAll("p").forEach((e) => { e.addEventListener('click', fn); });  

This bit of code is very antiquated.  For new development, unless you have some need to support ancient IE systems, you should either just use new XMLHttpRequest unconditionally, or preferably, use fetch(). 
Part of your issue is also not understanding what this means in the code I think.  this refers to whatever object a function is attached to.  In your onload function, this will refer to your xmlhttp object.  Outside of that function, this would refer to something else, so this.responseText outside the function is not the same as this.responseText inside the function.  Outside the function, you'd use xmlhttp.responseText.
My suggestion is you get rid of this code, and write your code using the modern fetch() api.  That would look something like this:
fetch('save_pool_history.php?action=select_past').then((response)=>{ if (!response.ok){ throw new Error('Invalid Response'); } return response.text(); }).then((text)=>{ alert(text); }).catch((error)=>{ alert('Error fetching response.'); });  

Did you enable remote content in your email client?  Most block it by default as far as I know.

There is no sure-fire way to accomplish what you want to do.  Whatever methods that do exist to try and automatically determine this are typically blocked or otherwise made useless for user privacy reasons.  Many email clients for example will not load remote images by default, so your tracking pixel would not work.  I think gmail takes the opposite approach and always loads the images, whether the email is read or not so it similarly provides no insight as to whether the user opened the email.
You can add a tracking pixel to try and catch the few people using a client that will still load it.  Otherwise the next best option is to add tracking data to all the links inside the email so if they click any of the links you will know about it.  Even that type of tracking can sometimes be bypassed by clients.
 

Use LEFT JOIN instead of inner join for the joints to the sub-queries.  You'll get NULL for reps with no sales.  You can convert that null to a 0 in the select clause if you want by using COALESCE.

The .style.* properties only provide values directly assigned to an element, either via JS or via a style="" attribute, they do not reflect CSS applied via selectors.  For that, you need to use getComputedStyle.
I do not see anything in your current code that is changing the left attribute of your elements, so it'd never change to be zero.  Scrolling does not affect the left attribute of an element if that was your intent.  If you want to check if something has been scrolled out of view, you need to find the scroll position and compare it to the position of the element.
 

Sounds to me like you have the correct solution as far as the DB is concerned, it's just your framework choice that is the issue.  I use Symfony/Doctrine and it could handle this setup no problem.
If you can't do what you want using Laravel's setup, you may need to just resort to doing some manual queries.  I don't use laravel so can't say for certain if this really is a limitation or how to work around it.
 

Seems the password is being written in clear text to a file.  All you need to do then is read that file.

The function you want is preg_split, not preg_match_all or preg_replace_callback.
 

INSERT queries do not have a result set.  As such, mysqli_stmt_get_result returns false, as documented.
To check if a row was inserted, use mysqli_stmt_affected_rows.

Please do not post screen shots of your code.  Copy and paste the relevant parts of your code into your post using a code block (the <> button).  That picture is barely readable.
As for your issue, you are missing the semi-colon on the line above.

The main issue with your code is how you're trying to find the days element.  To explain a bit, lets look at how your HTML gets rendered:
<div class='month-container'> <div class='days' id='Vendémiaire'> <div class='day'>1<span class='name'>Raisin</span></div> <div class='day'>2<span class='name'>Safran</span></div> <div class='day'>3<span class='name'>Châtaigne</span></div> <div class='day'>4<span class='name'>Colchique</span></div> <div class='day'>5<span class='name'>Cheval</span></div> </div> <div class='month'>Vendémiaire</div> </div> You are attaching your click handler to the div.month element.  That means in your click handler, el is going to reference that element.
To try and find the days element, you are looping over the nextElementSibling property until there are no more siblings.  Think about that for a moment.  nextElementSibling is going to find the elements that come after the current element.  What comes after div.next?  Nothing.  You need to be looking at the previous siblings, using prevElementSibling.
Now, once you find your days element, you have another problem.  You are testing if it's style.display value is equal to "none".  One might think this should be true since you have applied display: none; in your css, but it's not.  The reason is that the style properties on the element only refer to styles applied directly to that element via a style="" attribute, not anything inherited via css selectors.  Since no direct style was applied to your element, the style.display will be the empty string, fail your condition, and you'll set it to display.  On a second click, it would pass and you'd set block and your toggle would start working.  Reversing the conditional would fix this double-click issue.
---
Now that the issues have been pointed out, there are other things of note and also general ideas that should be applied to make this better.
You have both an onclick="" attribute and an addEventListener call on your month elements.  You should only have one, and the preferred method is to use addEventListener in your code and stop using the on* attributes.  It should be removed, notice I didn't include it in my example html above. Your loop to find the days element is unnecessary.  The way your HTML is structured, the days element will be simply el.prevElementSibling, no looping required.  If you want to add other elements between your month div and the days elements, a better approach would be to use querySelector on the parent element: el.parentElement.querySelector('.days'); Dealing with style properties directly should generally be avoided if possible.  Changing the applied classes is a better approach.  For something like this, create another class that sets display to block which can be applied to your days element.  You can then use javascript to toggle this class on and off. .days.visible { display: block; } days.classList.toggle('visible');  
You can view the above suggestions implemented in this demo fiddle.
 

The container needs to contain only your .update_card elements, and those elements must be direct children of the container.
Your original HTML doesn't meet those requirements.  The .blw element also contains your .update_grade element (which is the :first-child).  Your screenshot suggests every .update-card is wrapped in some other parent element (hence, they all are :last-child of that container).
 

You can use composer stuff, you'd just need to add the "composer/composer" package as a requirement to your project.
If all you need is the class map stuff, that is it's own component (composer/class-map-generator) so you could include just it instead.
 

Neither of those is a valid email address.  Your attempt at $to has extra '..' surrounding the email.  Your attempt at $from has no local part (before the @).
I would highly suggest using a library to handle your emails instead of trying to use mail() directly.  Symfony/mailer is my choice.
 

You can generate whatever HTML you want and swap it out using the JS code.  The HTML structure in my example is how I'd probably code it, but nothing about it is required.  You'd need to adjust the JS to match up with whatever your final HTML is with regards to the classes/IDs etc.
 
There are a variety of ways to handle the next question bit. You could include a link to the next question when loading the current question.  You could load a list of question IDs when the page first loads and use JS to walk the list.  You could load the questions by a display number (1, 2, 3, ...) and just keep incrementing it until you get a 'No more questions' response.
Since you already have code to load a question by it's ID, one of the first two options might be easiest to implement.  The first option would keep you coding mostly in PHP by just returning a link for the JS to follow.  The second involves a little more JS work to walk the list of question IDs.
 

If I am understanding the problem right, then it sounds like there's some element on the page that cannot be scaled down so the entire page gets scaled down so that element will fit.  Examples could be form elements or images with set widths.  My site for example has a couple pages with textarea elements that cause the page to not display scaled down on mobile.  Adding width: 100% to them in the mobile styles would fix it, I just haven't done it.

This is something from the days of Internet Explorer.  It will not work on any modern browser.  If you want to use a local database, use IndexedDB.

If you want to use /api/houseinfo/1 as your URL, then you need it have that mapped by the server to /api/houseinfo.php?id=1.  This is typically done using a URL rewriting feature of your server software. For apache, that is mod_rewrite.
Since you're getting a 404 when using /api/houseinfo/1, that implies such rewriting is not taking place.  Either you have not configured it, or have configured it incorrectly.
 

All your cookie code there is redundant.  session_start manages its own cookie, you don't need to do it yourself.
You can control the SameSite value either using the configuration option session.cookie_samesite or the session_set_cookie_params function (before calling session_start).  Example:
session_set_cookie_params([ 'lifetime' => 0 , 'path' => '/' , 'domain' => '.site.com' , 'secure' => true , 'httponly' => true , 'samesite' => 'Lax' ]): session_start();  

The braces specify a repetition range, like so: {min[,max]}.  If you only set the min value then it is an exact count.
So what you have says match exactly 5 digits, no more and no less. Presumably, you'd want to instead match between 0 and 5 digits, assuming something like 8M is valid.  To do that, you set both values accordingly.
\d{0,5}  

You are not passing the ID of the record to delete in your delete request, so your script is returning the error text "Error: 'id' parameter is missing in the request."
Your Javascript code is expecting the response to be JSON data.  Your error message text is not JSON data, so trying to parse it as JSON throws an error.

upper-case N Name is not the same as lower-case n name.
 

Presumable that would be in whatever .css file you imported into your page to make those classes available to you in the first place.  You could just use the browser's dev tools to inspect the elements and see the rules and properties applied too.
Have you looked over the documentation?