I want to add some JavaScript code to my page so I can run something only once.

I have a button which has a click event listener and calls a JS function.

  <button class="btn btn-warning m-auto">
    Hi! Click me
  </button>
  <h4 style="display"none">Lorem Ipsum</h4>


<script>
    $('button')
      .html('Click me') // Try edit it...
      .on('click', () => $("#myHeader").css("display","block"))
</script>

Now, as much as I know, this button will execute and "display" as block that header every time it is clicked. Can I somehow make it to display it only once. PS: making the button unclickable after it is once clicked is not an option.

EDIT: added a snipped code to this question. As you can see we will get the console.log text every time we click the button. How can we make it to only get executed once.

Like some sort of counter maybe: when it's clicked-counter++, then if counter <=2 console.log("do something else")...

#myH3 {
  display: none;
}

<button onclick="test();">Click me</button>
<h3 id="myH3">lorem ipsum</h3>

<script>
  function test() {
    document.getElementById('myH3').style.display = "block";
    console.log("done");
  }
</script>