JS Как менять активный элемент коллекции?

Пытаюсь переписать код с jQuery на ванильный JS. При клике на элемент коллекции должен добавляться класс 'active', а при клике на другой элемент класс 'active' должен передаться другому.

Код:

<tbody id="body_table">
   <tr class="row" data-id="1">
     <td class="name ">Смородина Алена</td>
   </tr>
   <tr class="row " data-id="2">
     <td class="name">Коновалов Александр</td>
   </tr>
   <tr class="row " data-id="3">
     <td class="name">Зайченко Валентина</td>
  </tr>
</tbody>

На jQuery это примерно так

$(document).ready(() => {
    $('.row').click((event) => {
        const userId = event.currentTarget.getAttribute('data-id');
                setActiveRow(event.currentTarget);
    })
});

function setActiveRow(el) {
    $('.row').removeClass('active');
    $(el).addClass('active');
}

А на чистом достиг такого результата. Класс 'active' навешивается и убирается только с одного элемента, индекс которого прописан.

function learnUserId() {
    for (var i = 0; i < row.length; i++) {
        row[i].addEventListener('click', function () {
            const userId = event.currentTarget.getAttribute('data-id');
            setActiveRow(event.currentTarget)
        });
    }
}

function setActiveRow(el) {
    if (row[1].classList.contains('active') == true) {
        el.classList.remove('active');
    } else {
        el.classList.add('active')
    }
}

Помогите разобраться как правильно сделать. Спасибо!