Как максимально правильно связать между собой input'ы и текстовые блоки?

Question

[ForSureN1]

Добрый день.
Возник вопрос, касательно рефакторинга, буду рад если закидаете камнями, но дадите качественную оценку и ответ)
Есть страница, на ней есть 2 блока, левый блок, это условный пдф файл, в котором есть заголовок и т.д. и т.п., то есть динамические данные.
Правый блок имеет множество input'ов, собственно в который мы вводим какое либо значение, и оно передается уже в левый блок, я решил эту задачу путем сравнения data атрибута, ниже прикрепляю код, вопрос собственно в том, возможно ли этот код как то оптимизировать, заранее спасибо.

const brifParent = document.querySelector('.brife__wrapper')
let leftInput = document.querySelectorAll('.changeInfo');

brifParent.addEventListener('input', e => {
    const target = e.target;
    if (target.classList.contains('input-info')) {
        let rightInput = target.getAttribute('data-name');
        leftInput.forEach(input => {
            if (rightInput === input.getAttribute('data-name')) {
                input.textContent = target.value;
            }
        })
    }
})

P.S. не ругайтесь на названия переменных, писал для себя

Answer 1

[ForSureN1]

Самостоятельно погуглив, понял что можно искать элемент по дата атрибуту, собственно вот и решение

const brifParent = document.querySelector('.brife__wrapper')
let brifeLeft = document.querySelector('.brife__left')

brifParent.addEventListener('input', e => {
    const target = e.target;
    if (target.classList.contains('input-info')) {
        let rightInput = target.getAttribute('data-name');
        if (rightInput === brifeLeft.querySelector(['[data-name=' + rightInput + '']).getAttribute('data-name')) {
            brifeLeft.querySelector(['[data-name=' + rightInput + '']).textContent = target.value
        }
    }
})