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">
            <label>title</label>
            <input type="text" name="title" class="form-control">
            <hr>
            <div class="form-group">
                <label>info</label>
                <textarea name="info" class="form-control">
                </textarea>
            </div>
        </div>
        <button class="btn btn-primary btn-block">save</button>
      </form>

    <button class="btn btn-secondary edit">edit</button>
    <button class="btn btn-danger">delete</button>
  </div>
  <br/>
  {{/each}}


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


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

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

    });

}