JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">add name</button><button id="end">end</button>
<table id="wr" frame="border" rules="all">
    <tr>
        <td>name</td>
        <td>prop1</td>
        <td>prop2</td>
    </tr>
</table>

JavaScript

$(document).ready(function(){
    
    $("#add").click(function(){
      var tr=$("<tr></tr>");
      var  td_name=$("<td class='name'></td>").append("<input></input>");
      var  td_prop1=$("<td class='prop1'>2</td>");
      var  td_prop2=$("<td class='prop2'></td>");
      tr.append(td_name).append(td_prop1).append(td_prop2);
      $("#wr").append(tr);
    });
    
    $(document).on('change','.name input',function(){
        var val_name=$(this).val();
        $(this).closest('tr').find('.prop1').text(val_name+' - prop1');
        $(this).closest('tr').find('.prop2').text(val_name+' - prop2');
    });
    
     $(document).on('click','#end',function(){
        $('.name input').each(function(index){
           var val_name=$(this).val();
           $(this).replaceWith(val_name);
        })
         
    });   
    
});