How to Add Constraint With No Validation?

How can I handle multiple button?

Harris

I want to handle multiple buttons. My aim is when a user will click on the first button then the first paragraph will be changed, again when a user will click on the second button then the second paragraph will be changed. I tried, but not working. Please check my code and give me a solution....

var len = document.querySelectorAll(".myButton").length
var plen = document.querySelectorAll(".myP").length
for (i = 0; i < len; i++) {
  for (j = 0; j < plen; j++) {
    document.querySelectorAll(".myButton")[i].addEventListener("click", function() {
      if (document.querySelectorAll(".myButton")[i] == document.querySelectorAll(".myP")[j]) {
        document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML;
      }
    });
  }
}

<p class="myP">oke</p>
<p class="myP">oke</p>

<h1 class="pt-3 pb-3 pl-5 pr-5 bg-warning text-light btn mx-5 my-5">00</h1><br>
<hr style="background-color:red; width:50%">
<button class="btn bg-primary text-light mx-5 my-5 myButton">one</button>
<button class="btn bg-primary text-light mx-5 my-5 myButton">two</button>

error:

5_eventListener.html:43 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
    at HTMLButtonElement.<anonymous> (5_eventListener.html:43:119)

Error line:

document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML;