JavaScript capture data from input field & post it to output field in a multiple row app

I want to input data to a div (column headed ‘Result’) from an input (columnd headed ‘Edit/Update’) field using a button (named ‘Update’) to trigger the event. I can grab the data from the input field and I can identify which button is clicked. I can’t seem to combine the 2 functions to get the data transferred from the input to the output div.

the form with the fields in question
This is my JS code:

// select the parent element
const formGroup = document.getElementById('table');
// select input field
const addData = document.getElementById('input');
// select output field
const output = document.getElementById('output');

// identify which button is clicked
const buttonClicked = (e) => {
const isButton = e.target.nodeName === 'BUTTON';

if (!isButton) {
return;
}
console.log(e.target.id);
};
formGroup.addEventListener('click', buttonClicked);

// Get data from input and display to output element
addData.addEventListener('submit', (e) => {
e.preventDefault();
const data = addData.res.value.trim();
if (data.length) {
document.getElementById('output').innerHTML = data;
addData.reset();
}
// console.log(data);
});

**This is my HTML:**
<div id="table">
    <div id="title" class="row">
      <div>
        <div class="header">Round #</div>
          </div>
          <div>
            <div class="header">Date</div>
          </div>
          <div>
            <div class="header">Versus</div>
          </div>
          <div>
            <div class="header">Ground</div>
          </div>
          <div>
           <div class="header">Result</div>
          </div>
          <div>
            <div class="header">Edit/Update</div>
          </div>
        </div>
        <div id="line1" class="row">
          <div>
            <div class="header">1.</div>
          </div>
          <div>
            <div class="header">17/08/2024</div>
          </div>
          <div>
            <div class="header">Ipswich</div>
          </div>
          <div>
            <div class="header">Portman Road</div>
          </div>
          <div>
            <div id="output" class="header"></div>
          </div>
          <div class="form-group">
            <input
              id="input"
              class="data"
              placeholder="Enter/Edit Result"
              name="res"
            />
            <button id="button-1" class="btn btn-success" type="button">
              Update
            </button>
          </div>
        </div>
        <div id="line2" class="row">
          <div>
            <div class="header">2.</div>
          </div>
          <div>
            <div class="header">25/08/2024</div>
          </div>
          <div>
            <div class="header">Brentford</div>
          </div>
          <div>
            <div class="header">Anfield</div>
          </div>
          <div>
            <div id="output" class="header"></div>
          </div>
          <div class="form-group">
            <input
              id="input"
              class="data"
              placeholder="Enter/Edit Result"
              name="res"
            />
            <button id="button-2" class="btn btn-success" type="button">
              Update
            </button>
          </div>
        </div>
      </div>
    </div>