Как мне проанализировать этот параметр функции, который включает queryselector?

Код Контекст

Мы пытаемся заставить работать нашу собственную функцию привязки пользовательских данных. Пока все хорошо, у нас все заработало, но сейчас мы проводим рефакторинг.

Проблема

Я пытаюсь сделать построение функции более удобным для пользователя. В настоящее время для его вызова это выглядит так:

var obj = new MyBind(document.querySelectorAll('[data-bind="total"]'), 1234);

Ошибка: Связанные элементы не обновляются .

В идеале я хочу передать один параметр. Но для этого первого раунда рефакторинга я хочу просто передать имя элемента. Как это:

var obj = new MyBind("total", 1234);

Неудачные попытки

Я безуспешно пробовал следующее:

// inside my function
this.elements = document.querySelectorAll(`[data-bind="${elements}"]`);

Живая демонстрация

https://jsbin.com/qakutudole/edit?html,js,output

Кто-нибудь понимает, почему это не работает?

Исходный код

Вот вся функция:

function MyBind(elements, data) {
        
    this.data = data;
    this.elements = elements;
    //this.elements = document.querySelectorAll(`[data-bind="${elements}"]`);
                
    for( var i = 0; i < elements.length; i++ ) {
                        
        if(elements[i].tagName == 'INPUT' || elements[i].tagName == 'SELECT' || elements[i].tagName == 'TEXTAREA' ) {
            elements[i].value = data;
        } else if( elements[i].tagName == 'DIV' || elements[i].tagName == 'SPAN' || elements[i].tagName == 'B' ) {
            elements[i].innerHTML = data;
        }
        
        elements[i].addEventListener("change", this, false);
    }
        
}

MyBind.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "change": this.change(event.target.value);
        
        
    }
};



MyBind.prototype.change = function(value, updateAmounts) {
    
    updateAmounts = typeof updateAmounts !== 'undefined' ? updateAmounts : true;
                        
    this.data = value;
        
    for( var i = 0; i < this.elements.length; i++ ) {
                
        if(this.elements[i].tagName == 'INPUT' || this.elements[i].tagName == 'SELECT' || this.elements[i].tagName == 'TEXTAREA' ) {
            this.elements[i].value = value;
        } else if( this.elements[i].tagName == 'DIV' || this.elements[i].tagName == 'SPAN' || this.elements[i].tagName == 'B' ) {
            this.elements[i].innerHTML = value;
        }        
        
    }
    
    
    if( updateAmounts === true ) {
        alert("Updating amounts!");
    }
    
};

var obj = new MyBind(document.querySelectorAll('[data-bind="invoice_total"]'), 1234);
//var obj = new MyBind("invoice_total", 1234);