Convert CreateElement to backtick not work

Question

I am working on "createElement" with "backtick". Because it works faster. I will add 4-5 elements. So I want to use "backTick".

I tried to convert the "createElement" clause to "Backthick". But I get the error message "ReferenceError: Grid not defined".

I'm could not define the variable ri into "backtick".

var test = function (ui) {

let ri=ui.rowIndx;  

var renkEkle = document.createElement('input');
renkEkle.type = "button"
renkEkle.value = "Mavi"
renkEkle.addEventListener('click', function(){
    console.log('createElement',this);
    grid.addClass({rowIndx: ri, dataIndx: 'ADATE', cls: 'mv'});
    SatirDegistir(ri,['ADATE','OD_R1'],['2020-06-01','td']);
});


}

var test = function (ui) {

let ri=ui.rowIndx;  

var renkEkle = `<input type="button" onclick="console.log('BackThicks',this);grid.addClass({rowIndx: 1, dataIndx: 'ADATE', cls: 'mv'});SatirDegistir(1,['ADATE','OD_R1'],['2020-06-01','td']);" value="Mavi">`;

}

Line 149-161

Line 149-161 Picture:

Line 149-161 Code:

    var $inp = ui.$cell.find("input"),                
        grid = this,
        
        validate = function (that) {
            var valid = grid.isValid({
                dataIndx: ui.dataIndx,
                value: $inp.val(),
                rowIndx: ui.rowIndx
            }).valid;
            if (!valid) {
                that.firstOpen = false;
            }
        };
        
    console.log('grid=',grid);
    
    
        var renkEkle = `<input type="button" onclick="console.log('BackThicks',this);grid.addClass({rowIndx: 1, dataIndx: 'ADATE', cls: 'mv'});SatirDegistir(1,['ADATE','OD_R1'],['2020-06-01','td']);" value="Mavi">`;