При клике на строку в соседнем с таблицей DIV’е отобразить форму редактирования данных выбранной строки. JavaScript

Есть задача, из JSON выведена таблица, нужно при клике на строку таблицы вывести форму для изменения этой строки. Я выполнил это с помощью данного ниже кода. Но обнаружил проблему в том что при клике на несколько строк подряд, и последующем сохранении меняется все кликнутые строки, а должна только последняя кликнутая. Перепробовал всё что пришло в голову, и вешал доп.класс "active" на строки. И вводил различные условия. Пробовал объявлять событие и циклом и делегированием, вводил одиночное событие с последующим его удалением. Ничего не решает проблему, а в интернете ответа не нашлось. Кто знает как можно решить, буду очень благодарен за помощь.

const modal = document.querySelector('.modal')
const rows = tableBody.querySelectorAll('tr')

const form = document.forms.form
const inputFirstName = document.form.form__firstName
const inputLastName = document.form.form__lastName
const textareaAbout = document.form.form__about
const selectEyeColor = document.form.form__eyeColor
const formSubmit = form.querySelector('.form__submit')
const formClose = form.querySelector('.form__close')


let tableBodyEvent = function (event) {

    let el = event.target.closest('TR')

    changeActiveClass(el)

    el.classList.add('active')

    callFunctions()
}

tableBody.addEventListener('click', tableBodyEvent, { once: true })

const changeActiveClass = (el) => {

    for (let i = 0; i < rows.length; i++) {
        rows[i].classList.remove('active')
    }

}

const callFunctions = () => {
    for (let i = 0; i < rows.length; i++) {
        if (rows[i].classList.contains('active')) {
            console.log(rows[i].classList.contains('active'));
            showModalForm(rows[i])

            proccessingDataOfForm(rows[i])
        }
    }
}


const showModalForm = (row) => {
    let elementPosition = row.getBoundingClientRect();

    modal.style.height = '260px'
    modal.style.opacity = '1'
    modal.style.top = `${elementPosition.top + window.scrollY - 48}px`
}


const proccessingDataOfForm = (row) => {

    inputFirstName.value = row.querySelector('.firstName__item > div').textContent
    inputLastName.value = row.querySelector('.lastName__item > div').textContent
    textareaAbout.value = row.querySelector('.about__item > div').textContent
    selectEyeColor.value = row.querySelector('.eyeColor__item-text').textContent
    selectEyeColor.value = row.querySelector('.eyeColor__item-circle').style.backgroundColor

    formSubmit.addEventListener('click', () => {
        row.querySelector('.firstName__item > div').textContent = inputFirstName.value
        row.querySelector('.lastName__item > div').textContent = inputLastName.value
        row.querySelector('.about__item > div').textContent = textareaAbout.value
        row.querySelector('.eyeColor__item-text').textContent = selectEyeColor.value
        row.querySelector('.eyeColor__item-circle').style.backgroundColor = selectEyeColor.value
        modal.style.height = '0'
        modal.style.opacity = '0'
        tableBody.removeEventListener('click', tableBodyEvent), {once: true}
        tableBody.addEventListener('click', tableBodyEvent, { once: true }, {once: true})
    })
    formClose.addEventListener('click', () => {
        modal.style.height = '0'
        modal.style.opacity = '0'
        tableBody.removeEventListener('click', tableBodyEvent), {once: true}
        tableBody.addEventListener('click', tableBodyEvent, { once: true }, {once: true})
    })

}