JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Table on Main Page</h3>
<table>
   <th>Table header</th>
    <tr>
        <td><input type="text" id="input_1"/></td>
        <td><input type="button" id="1" /><a href="#"></a></td>
    </tr>
     <tr>
        <td><input type="text" id="input_2"/></td>
        <td><input type="button" id="2" /><a href="#"></a></td>
    </tr>
</table>

<table id="table_dialog_1">
        <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
     <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
</table>
<h3>Table on Main Page when first table row on Window Dialog is clicked</h3>
<table>
    <th>Apple</th>
    <th>Ball</th>
    <tr>
        <td><input type="text" value="A1"/></td>
        <td><input type="button" /><a href="#">A3,A2</a></td>
    </tr>
     <tr>
        <td><input type="text" /></td>
        <td><input type="button" /><a href="#"></a></td>
    </tr>
</table>

CSS

table{
    border : 1px gray solid;
}
#table_dialog_1{
 display: none;   
}

JavaScript

$(document).ready(function(){
    $('#1, #2').on('click', function(){
        $("#table_dialog_1").dialog();
        var id = $(this).attr('id');
        $('#table_dialog_1 td').unbind('click').on('click', function(){
            console.log('#input_'+id);
            $('#input_'+id).attr('value', $(this).html());
            $('#table_dialog_1').dialog('close');
        });
    });
});