Один и тот же индекс дает разные элементы DOM в цикле

Question

Я пытаюсь добавить два прослушивателя событий к одним и тем же элементам DOM следующим образом:

const rows = document.querySelectorAll(`.row`);

for (let i = 0; i < rows.length; i++) {
    rows[i].addEventListener(`touchend`, (e) => {
        console.log(i)
        if (documentClick) {
            const code = rows[i].dataset.code;
        }
    });

    rows[i].addEventListener(`click`, (e) => {
        console.log(i)
        const code = rows[i].dataset.code;
    });
}

<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>

Когда я проверяю индекс нажатого элемента в консоли, он дает мне другой индекс. Как это может быть и почему это происходит?