Copy contents of textarea to input

In this table each row has a text area wd. I want to copy the contents of #wd to #wdi.

That is the user types in wd and the wdi value becomes wd value.

I am assuming I need to use onkeyup function but not sure.

<tbody>
while(rs1.next())
{ %>
<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>

<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input  id='issue_id' name ='issue_id' value='<%=rs1.getString(1)%>' class='disable' type="hidden">
<input  id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>
<% } %>
</tbody>

Solution

You can use keyup function as, note that you need get #wdi within each tr.

$('[name ="wd"]').keyup(function(){
  //console.log($(this).val())
  $(this).closest("tr").find("#wdi").val($(this).val());
})

$('[name ="wd"]').keyup(function(){
  //console.log($(this).val())
  $(this).closest("tr").find("#wdi").val($(this).val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>

<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>
<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input  id='issue_id' name ='issue_id' value='test1' class='disable' type="hidden">
<input  id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>
<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>
<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input  id='issue_id' name ='issue_id' value='test2' class='disable' type="hidden">
<input  id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>

</tbody>
</table>