Different events in same Handlebars script

Question

I've got the next doubt/problem. I need to use some Id's that are loaded by a Handlebars script. Once I get the values, a table, I would like to be able to execute another ajax call if I push a button

Here's the code:

HTML:

div class="container">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Nombre</th>
                <th scope="col">Valor</th>
                <th scope="col">Tipo</th>
                <th scope="col">Cron</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody class= "tbody">
            <script id="properties-template" type="text/x-handlebars-template">
                {{#each properties}}
                <tr>
                    <th>{{clave}}</th>
                    <td>{{valor}}</td>
                    <td>{{variable}}</td>
                    <td>{{cron}}</td>
                    <td><button class="btn"><i class="fa fa-pencil"></i></button></td>
                    <td><button class="btn"><i class="fa fa-trash"  id="{{id}}" style="color:red"></i></button></td>
                </tr>
                {{/each}}
            </script>
        </tbody>
    </table>
</div>

JS:

$(document).ready(function(){
$.ajax({
       url: URL_address,
    success: function(data){
      var source = $("#properties-template").html();
      var template = Handlebars.compile(source);
      $('.tbody').append(template(data));
    },
    error: function(data) {
      console.log('error', data);
    }
  })   
});

I've tried to achieve what I need doing $(".fa-trash").click(..) but I get an undefined. How can I do?