Call function in dynamically created row in Polymer

Question

I am adding a row dynamically using a template. While adding the row, I also want a on-change="addTotal" function on Amount column. Whenever the Amount column of newly added row changes, it should call addTotal() function that adds all the values of rows and does total. However, using this code, it does not call the addTotal function.

addRow() {
    var template = document.createElement('template');
    template.innerHTML = '<div class="tr" ><div class="td" >' +
        '<vaadin-text-field theme="field-description"></vaadin-text-field></div><div class="td"><div class="td" >' +        
        '<vaadin-text-field theme="field-amount" class="totalcheck" on-change="addTotal"></vaadin-text-field></div><div class="td" ></div>'
 
    var fragment = template.content;
    this.$.Table.insertBefore(fragment, this.$.subTotalRow);

}

addTotal(){
//this adds all values of Amount column
}

I have tried addEventListener using a class name "totalcheck" in addRow() function, but this is undefined too.

document.querySelector('totalcheck').addEventListener('change', function (e) {
            console.log(e.detail); // true
        })