Auto scroll when Text appears

Question

I'm trying to put multiple buttons next to each-other. When I press on a button, the text appears and auto-scroll happens. This works. But when I want more buttons, then it doesn't work the way I want it to work. Either it shows an error and neither buttons work, or the second button shows the same text as the 1st button.
This is the 1st button which I'm trying to copy.
<button id="scroll" class="button-friends-clickon" type='button' onclick="toggleText()"><a href="#scroll" style="color:yellow">Demo</a></button>
<p id='friends-filia' style='display:none'>text</p>

function toggleText() {
var text = document.getElementById("friends-filia");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}

For the second Button, I'm using the same code but with different ID's and text.

Anyone know what to do? Or maybe another code would solve this?

Thank you for any help!

Answer 1

It worked when I tried with adding a parameter for the text ID to the function, pass a different text ID from each onclick and make each href references different ID for scrolling.

Answer 2

If you just want to scroll to the bottom, you can use this:

let pageX = window.pageXOffset;
window.scrollTo(pageX, document.body.scrollHeight);

Here are more informations about scrolling.

https://javascript.info/size-and-scroll-window

Answer 3

This example will help you:

https://code.sololearn.com/WJqv5tPfKuso/?ref=app