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"  class='clickMe'/><a href="#"></a></td>
    </tr>
     <tr>
        <td><input type="text" id="input_2"/></td>
        <td><input type="button" id="2"  class='clickMe' /><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

var clickedButton;
$(document).ready(function(){
	$('.clickMe').click(function(){
		clickedButton = this;
        $( "#table_dialog_1" ).dialog();		
	});
    $( '#table_dialog_1 tr').click(function(){ 
	    var  tds = $(this).children();
		$(clickedButton).parent().prev().find('input').val(tds.eq(0).html());
		$(clickedButton).next('a').text(tds.eq(2).html()+','+tds.eq(1).html());
        $( "#table_dialog_1" ).dialog('close');
    });
});