Почему моя функция JavaScript добавляет все больше строк?

У меня есть документ с множеством кнопок, все из которых содержат onclick="myFunction()" внутри тега button. Когда я нажимаю 1-ю кнопку, в мою таблицу добавляется 1 строка, как и требуется. Однако, когда я нажимаю 2-ю кнопку, в таблицу добавляется 2 строки, и так далее, т.е. при нажатии на i-ю кнопку добавляется i строк. Как я могу исправить мою функцию JavaScript, чтобы она добавляла только 1 строку при каждом новом нажатии на кнопку? 

        function myFunction() {
        table_body = document.getElementById("t_body");
        document.addEventListener('click', (e) => {
            let element = e.target;
            if(element.tagName == "BUTTON") {
                row = table_body.insertRow()
                cell1 = row.insertCell();
                cell1.innerHTML = element;
                cell2 = row.insertCell();
                cell2.innerHTML = element.id;
                cell3 = row.insertCell();
                cell3.innerHTML = element.id;
                cell4 = row.insertCell();
                cell4.innerHTML = element.id;
                element.style.backgroundColor = '#004d00';
                element.style.color = 'white';
            }
        });
    }

Я бы поделился более подробным кодом, чтобы увидеть, что происходит. Первоначально похоже, что вы можете добавить несколько слушателей событий к BUTTON.

попробуйте нацелить кнопку на класс. и убедитесь, что myFunction вызывается только один раз.

<html>
<body>
    <table id="table">
      <tr>
        <td><BUTTON class='form-button' id='example' >TEST</BUTTON></td>
        <td>example</td>
      </tr>
    </table>
<br>
<script>
      document.addEventListener("DOMContentLoaded", function(event) { 
        myFunction();
      });
      
       function myFunction() {
          table_body = document.getElementById("table");
          document.addEventListener('click', (e) => {
          console.log('clicked');
              let element = e.target;
              if(element.classList.contains('form-button')) {
                  row = table_body.insertRow()
                  cell1 = row.insertCell();
                  cell1.innerHTML = 'Hello';
                  cell2 = row.insertCell();
                  cell2.innerHTML = element.id;
                  element.style.backgroundColor = '#004d00';
                  element.style.color = 'white';
              }
          });
        }
</script>

</body>
</html>
Вернуться на верх