JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div class="parent__block">
    <div class="child__block" data-id="1">
      <div class="">name: </div><input type="text" class="name">
      <div class="">surname: </div><input type="text" class="surname">
      <button type="submit">click</button>
    </div>
  </div>
  <div class="parent__block">
    <div class="child__block" data-id="2">
      <div class="">name: </div><input type="text" class="name">
      <div class="">surname: </div><input type="text" class="surname">
      <button type="submit">click</button>
    </div>
  </div>
</form>

JavaScript

const form = document.querySelector('form')
const button = document.querySelectorAll('button')


const persons = [{
    id: 1,
    check: 1,
  },
  {
    id: 2,
    check: 0,
  }
]

button.forEach((btn) => {
  btn.addEventListener("click", function(e) {
    e.preventDefault()
    const parent = e.target.closest(".parent__block");
    const name = parent.querySelector('.name');
    const surname = parent.querySelector('.surname');
    const child = parent.querySelector('.child__block')
    const dataID = +child.dataset.id
    console.log(dataID)

    const data = {
      id: dataID,
      name: name.value,
      surname: surname.value,
    }

    for (let key in persons) {
      if (dataID === data.id) {
        persons[key].name = name.value
        persons[key].surname = surname.value
      }
    }
    console.log(persons)
  })
})