Need help)

Need help)

Hi. Whats up? I an mewbie and just cant understand how to finish my work. I need to create input by touble clicking on td and after "enter" save a changed. So all is ok, but after pressing enter, all tds being chaged. so how can i change only one? 
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title></title>

  7. <style type="text/css">
  8.   .ta{border: 2px solid black;
  9.     border-collapse: collapse;}
  10.     tr td {border: 2px solid black;
  11.     border-collapse: collapse; width: 100px;
  12.     height: 20px;}
  13. </style>
  14. </head>
  15. <body>
  16. <table class="ta">
  17.    <tr class="tr1">
  18.      <td > Name: </td>
  19.       <td class="td1" > Vito </td>
  20.    </tr> 
  21.    <tr class="tr1">
  22.      <td > Surname: </td>
  23.      <td class="td1"> Scaletta </td>
  24.    </tr> 
  25.    <tr class="tr1">
  26.      <td > Age: </td>
  27.      <td class="td1"> 21 </td>
  28.    </tr> 
  29.   </table>

  31. </body>
  32. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  33. <!-- <script src="js/script.js"></script> -->
  34. <script src="js/script1.js"></script>
  35. </html>

  37. // now starts jq code))

  40. $(document).ready(function(){
  41. $(".td1").dblclick(function(){
  42. var po=$(this).html()
  43. $(this).html("")
  44. $(this).append("<input class='i1'>")
  45. var inp=$(this).val()
  46. // $(this).empty()
  47. // $(this).html(inp)
  48. // $(".i1").val(po)

  51. })
  52. $("body").change(function(){
  53. // alert("The text has been changed.")
  54. var p = $(".ta").find("input").val()
  55. $(".td1").each(function(){
  57. $(this).html(p)

  59. })
  60. })
  61. })