JSFiddle - React, Tailwind, and code Playground

HTML

<table id='myTable'>
  <thead>
    <tr>
      
      <td>Имя</td>
      
      <td>Возраст</td>
      
    </tr>
    
  </thead>
  <tbody id='myTableBody'></tbody>
  
  </table>

JavaScript

var tr='';
var check = true;
var data = {

	boys:[{name:'Даниил',age:12},{name:'Родион',age:16}]

}

	for (var i=0; i<data.boys.length;i++) {

  	tr += '<tr data-count='+i+'><td data-name="name">'+data.boys[i].name+'</td><td data-name="age">'+data.boys[i].age+'</td></tr>';

  }
  
  myTableBody.innerHTML=tr;
  
  myTableBody.addEventListener('click',handler);
  
  function handler (e) {
  
  	var target = e.target;
    
    if (target.tagName!='TD') return ;
    
  	if (target.classList.contains('flag')) return;
  
    var td = '<br><input type="text" class="box" value='+target.innerHTML+'>';
    
    target.classList.add('flag');
    
    target.innerHTML +=td;
    
    var getInputs = document.querySelectorAll('.box');
    
    for (var i=0; i<getInputs.length;i++) {
    
    	getInputs[i].addEventListener('change',changeInput);
    
    }

  }
  
  function changeInput () {
  
  	var getTd = this.parentElement;

		var innerText =this.value;
    
    getTd.innerHTML=innerText;
    
    getTd.classList.remove('flag');
    
    var getTrNum = +(getTd.parentElement.getAttribute('data-count'));
    
    var getKey = getTd.getAttribute('data-name');
    
    data.boys[getTrNum][getKey] = innerText;
    
    alert(data.boys[getTrNum][getKey])
    
  
  }