how to get specific row text haviing same class in a table column when clicking on a button in one row

Issue

I want to get the date of the same row when I click on Hold Button in the same row. I have tried more searching on Google but I couldn't find any helpful query to fix this issue.

I am new in ajax that's why I need help from this community. Please help me fix it.

Here is what I am trying:

HTML:

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>User ID</th>
            <th>Date</th>
            <th>Name</th>
            <th>User Status</th>
            <th colspan="4" class="text-center">Action</th>
        </tr>
    </thead>
    <tbody id="load-table">
        <!-- dummy data for StackOverFlow to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
        <tr>
            <td>1</td>
            <td class="statsdate">2022-02-12</td>
            <td>Jhon</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
        <tr>
            <td>4</td>
            <td class="statsdate">2022-02-11</td>
            <td>Michele</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
        <tr>
            <td>10</td>
            <td class="statsdate">2022-02-10</td>
            <td>William</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
    </tbody>
</table>

AJAX:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#load-table").append(
            "<tr>"
            + "<td>" + value.id + "</td>" +
            "<td class='statsdate'>" + statsDate + "</td>" +
            "<td>" + value.full_name + "</td>" +
            "<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
            "<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
            "</tr>"
        );
  });
  
  //Hold user by clicking on hold modal
        $(document).on("click",".hold",function(){
            var answer = window.confirm("Are You sure to mark this user as Hold?");
            if (answer) {
                var holdid = $(this).data("holdid");
                var sts_date = $(this).closest(".statsDate").text();
                var obj = {uID : holdid, date: sts_date};
                var myJSON = JSON.stringify(obj);
                console.log(myJSON);
            }
            else {
                $("#usersCount").html("");
            }
        });
</script>

Here is an image to make my question clear.

Image:

Question Image

Please help me fix it. Thanks in advance!

Solution

The issue is because closest() only looks through the parent elements of the target. In your HTML, .statsdate is a child of the sibling to the parent. As such the simplest way to do what you need is to use closest() to get the common parent tr, then find() to get the .statsdate.

Also note that the class is statsdate, not .statsDate - case is important in selectors.

var sts_date = $(this).closest('tr').find(".statsdate").text();

Working example:

$(document).ready(function() {
  let statsDate = (new Date()).toLocaleDateString();
  let value = {
    id: '123',
    full_name: 'foo bar'
  }

  $("#load-table").append(
    "<tr>" +
    "<td>" + value.id + "</td>" +
    "<td class='statsdate'>" + statsDate + "</td>" +
    "<td>" + value.full_name + "</td>" +
    "<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
    "<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
    "</tr>"
  );
});

//Hold user by clicking on hold modal
$(document).on("click", ".hold", function() {
  var answer = window.confirm("Are You sure to mark this user as Hold?");
  if (answer) {
    var holdid = $(this).data("holdid");
    var sts_date = $(this).closest('tr').find(".statsdate").text();
    var obj = {
      uID: holdid,
      date: sts_date
    };
    var myJSON = JSON.stringify(obj);
    
    console.log(myJSON);
  } else {
    $("#usersCount").html("");
  }
});

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Date</th>
      <th>Name</th>
      <th>User Status</th>
      <th colspan="4" class="text-center">Action</th>
    </tr>
  </thead>
  <tbody id="load-table">
    <!-- dummy data for StackOverFlow to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
    <tr>
      <td>1</td>
      <td class="statsdate">2022-02-12</td>
      <td>Jhon</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td class="statsdate">2022-02-11</td>
      <td>Michele</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
    <tr>
      <td>10</td>
      <td class="statsdate">2022-02-10</td>
      <td>William</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answered By - Rory McCrossan