JSFiddle - React, Tailwind, and code Playground

HTML

<div id = 'a'></div>
<table>
    <thead>
        <th>test1</th>
        <th>test2</th>
        <th>button</th>
    </thead>
    <tr>
        <td>Unit1</td>
        <td>1</td>
        <td><a href="#" onclick="edit($(this).closest('tr'))">edit</a></td>
    </tr>
</table>

<div id="dialog" title="Basic dialog">
</div>

<script>
function edit(a) {
    str = '';
    for(i = 0; i < a[0].cells.length-1; i++) {
        str += "<input type='text' value='" + a[0].cells[i].innerHTML + "'>";
    }
    str += "<br><a href='#' onclick='saveEdit($(this).closest(&#34 div &#34))'>save</a>";
    $('#dialog').html(str);
    $( "#dialog" ).dialog();
}
    
function saveEdit(a) {
    data = {test1: a[0].children[0].attributes[1].nodeValue, test2: a[0].children[1].attributes[1].nodeValue};
    $.ajax({
        url: "test.php",
        type: 'POST',
        data: data,
        cache: false,
        async: false,
        success: function (data)
        {
            alert('Data successfully added');
        }
    });
    
}
</script>