I can't set text after modifying the text

In the below code, if you click any table row the information will be written to textareas, and if you click on the temizle (En: "clean") button all textareas are going to be cleared. But, you can't set or clear the textarea after you change something in the text.

I didn't fix this bug yet. I'm using jQuery for selecting, and I think maybe this could be the problem?

$("#hastaliklar tr").click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var ad = $(this).find('td:eq(1)').html();
  var tanim = $(this).find('td:eq(2)').html();
  var belirti = $(this).find('td:eq(3)').html();
  var yap = $(this).find('td:eq(4)').html();
  var yapma = $(this).find('td:eq(5)').html();
  $("#adtxt").text(ad);
  $("#tanimtxt").text(tanim);
  $("#belirtitxt").text(belirti);
  $("#yaptxt").text(yap);
  $("#yapmatxt").text(yapma);
  $("#kaydetbtn").addClass("unvisible");
  $("#kaydetbtn").prop('readonly', true);
  $("#guncellebtn").removeClass("unvisible");
});

$("#temizle").click(function() {
  $("#adtxt").text("");
  $("#tanimtxt").text("");
  $("#belirtitxt").text("");
  $("#yaptxt").text("");
  $("#yapmatxt").text("");
  $("#guncellebtn").addClass("unvisible");
  $("#guncellebtn").prop('readonly', true);
  $("#kaydetbtn").removeClass("unvisible");
});

$(document).ready(function() {
  $('#hastaliklar').DataTable();
});

.table-container {
  overflow: hidden;
}

.table-container table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.table-container td {
  max-width: 300px;
  min-height: 40px;
  max-height: 80px;
  white-space: normal;
  text-overflow: ellipsis;
}

.unvisible {
  background: transparent;
  border: none !important;
  font-size: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<form>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Adı</span>
    <textarea class="form-control" id="adtxt" aria-label="With textarea"></textarea>
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Tanımı</span>
    <textarea class="form-control" id="tanimtxt" aria-label="With textarea"></textarea>
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Belirtileri</span>
    <textarea class="form-control" id="belirtitxt" aria-label="With textarea"></textarea>
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Yapılması Gerekenler</span>
    <textarea class="form-control" id="yaptxt" aria-label="With textarea"></textarea>
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Yapılmaması Gerekenler</span>
    <textarea class="form-control" id="yapmatxt" aria-label="With textarea"></textarea>
  </div>
  <div class="input-group mb-3">
    <button id="kaydetbtn" class="btn btn-success me-3 " type="button">Kaydet</button>
    <button id="guncellebtn" class="btn btn-warning me-3" type="button">Güncelle</button>
    <button class="btn btn-danger" id="temizle" type="button">Temizle</button>
  </div>
</form>
<table id="hastaliklar" class=" table table-bordered  table-primary" style="overflow: auto; height: 400px; display: block; ">
  <thead>
    <tr>
      <th>Güncelle</th>
      <th>Hastalık Adı</th>
      <th>Tanımı</th>
      <th>Belirtileri</th>
      <th>Yapılması Gerekenler</th>
      <th>Yapılmaması Gerekenler</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
      <td>Demans</td>
      <td>Yaşlılık</td>
      <td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
      <td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
        Yapılması gerekenler Yapılması gerekenler </td>
      <td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>

    </tr>
    <tr>
      <td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
      <td>Demans</td>
      <td>Yaşlılık</td>
      <td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
      <td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
        Yapılması gerekenler Yapılması gerekenler </td>
      <td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>

    </tr>
    <tr>
      <td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
      <td>Demans</td>
      <td>Yaşlılık</td>
      <td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
      <td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
        Yapılması gerekenler Yapılması gerekenler </td>
      <td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>

    </tr>

  </tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

Solution

I think the issue with the code is that you are trying to change the content of a textarea with the .text() method, while the correct method is .val(). The .text() method is used to set or return the text content of selected elements, while .val() is used to get the current value of the first element in the set of matched elements or set the value of every matched element.

Please try this and let us know if you are able to solve this issue:

    $("#hastaliklar tr").click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var ad = $(this).find('td:eq(1)').html();
  var tanim = $(this).find('td:eq(2)').html();
  var belirti = $(this).find('td:eq(3)').html();
  var yap = $(this).find('td:eq(4)').html();
  var yapma = $(this).find('td:eq(5)').html();
  $("#adtxt").val(ad);
  $("#tanimtxt").val(tanim);
  $("#belirtitxt").val(belirti);
  $("#yaptxt").val(yap);
  $("#yapmatxt").val(yapma);
  $("#kaydetbtn").addClass("unvisible");
  $("#kaydetbtn").prop('readonly', true);
  $("#guncellebtn").removeClass("unvisible");
});

$("#temizle").click(function() {
  $("#adtxt").val("");
  $("#tanimtxt").val("");
  $("#belirtitxt").val("");
  $("#yaptxt").val("");
  $("#yapmatxt").val("");
  $("#guncellebtn").addClass("unvisible");
  $("#guncellebtn").prop('readonly', true);
  $("#kaydetbtn").removeClass("unvisible");
});

$(document).ready(function() {
  $('#hastaliklar').DataTable();
});