addEventListerner on nodelist is not working

**need help here please i am trying to add click event on every edit class but it is not working... i used hbs template engine that loops database information from the server and also the loops creates multiple elements **

 {{#each source}}
  <div class="pdesign row">
     <h1 class="col-lg-12">{{title}}</h1>
    <p class="col-lg-12">{{info}}</p>

    <form method="post" action="/update" class="col-lg-12">
        <div class="form-group">
            <input type="text" name="title" class="form-control">
            <div class="form-group">
                <textarea name="info" class="form-control">
        <button class="btn btn-primary btn-block">save</button>

    <button class="btn btn-secondary edit">edit</button>
    <button class="btn btn-danger">delete</button>

var but = document.querySelectorAll('.edit');

for (var i = 0;i < but.length; i++){
    but[i].addEventListener('click', () => {

        console.log('hello i am working ' + i);