New to Javascript. How do I create show/hide elements for different buttons?

HTML Code...the buttons interfere with each other. How can I fix this?

---

<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>            <div id="help1">               <p> Help </p>            </div>    <button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>            <div id="help2">               <p> Help </p>            </div>  

Javascript shown with ids for the different buttons. Onload section to hide the content on page load.

<script>    function myFunction() {    var x = document.getElementById("help1");    if (x.style.display === "none") {    x.style.display = "block";    } else {    x.style.display = "none";    }    }    window.onload = function() {    document.getElementById("help1").style.display = 'none';    };  </script>    <script>    function myFunction() {    var x = document.getElementById("help2");    if (x.style.display === "none") {    x.style.display = "block";    } else {    x.style.display = "none";    }    }    window.onload = function() {    document.getElementById("help2").style.display = 'none';    };  </script>  

https://stackoverflow.com/questions/66927938/new-to-javascript-how-do-i-create-show-hide-elements-for-different-buttons April 03, 2021 at 01:15PM