Anchor links behaving strangely in Chrome

Hello, I am having an issue where some anchor links are scrolling to weird places on my page in Chrome and Edge, but works great in Safari. My setup is sort of complicated though so let me try to explain:

On my website, www.ruthretreat.com, there are three speakers with pictures and bios. Because the bios are long I want only one bio to show at a time, basically you click on one of the speaker images and it shows the bio. I accomplished this with the help of a Divi Booster plugin, Show/Hide module. The plugin allows you to create button modules that will show certain sections and hide certain sections when clicked. So I created three sections, one for each speaker's bio and added three buttons that toggle the appropriate content. However, I didn't want to click a button to toggle the content, so I found a way (thanks to help on this forum) to add code that would allow me to set a CSS ID to one of the buttons, then add an anchor link url to a photo, so that when the photo is clicked, instead of scrolling to the associated button, it "clicks" the button, toggling the appropriate content. I styled the three buttons in a way that they appear hidden.

The effect works great in Safari, however in other browsers, it only works for a few clicks and then starts behaving very strangely, sometimes scrolling to completely different sections on the page when you click one of the images. Sometimes it will work fine until you scroll slightly below the top of the images, then if you try to click one of the images it will scroll down slightly, instead of just simply clicking the button and not scrolling, which is how it should work and does work in Safari. Hopefully this makes sense, I am attaching a couple of photos and the code I am using to accomplish this. Thank you for your help! I have already been helped with other things related to this site on this forum and greatly appreciate it!

Code:

Log In or Sign Up to view this code.