How to get the value in the first cell of last row when I click last cell, which is empty, in the 2 x 4 table?

[A Sandeep]

I have a 2 x 4 table as described below. Its last cell is empty. When I click on the last cell, I get input type = "Date" tag in that cell as described in the javascript code below. My question is :- how to get the value in the first cell of last row, which is 5 in this case, simultaneously as I click last cell? Thanks in advance for the help and guidance.

code html table
<table>
<tr>
<th>ID</th><th>Name</th><th>Date From</th><th>Date To</th>
</tr>
<tr>
<td>2</td><td>John Doe</td><td>2023-05-02</td><td>2024-06-04</td>
</tr>
<tr>
<td>5</td><td>Mary Moe</td><td>2024-06-05</td><td></td>
</tr>
</table>
code

code javascript
<script>
var table = document.getEle mentsByTagName( "table")[0];
var cells = table.getElemen tsByTagName("td ");
for (var i = 1; i < cells.length; i++)
{
var cell = cells[i];
cell.onclick = function()
{
if (this.innerHTML .trim() === "" && !this.querySele ctor("input"))
{
var field = document.create Element("input" );
field.setAttrib ute("name", "cellDate") ;
field.setAttrib ute("type", "date");
cell.appendChil d(field);
}
}
}
</script>
code

[dev7060]

I have a 2 x 4 table as described below. Its last cell is empty. When I click on the last cell, I get input type = "Date" tag in that cell as described in the javascript code below. My question is :- how to get the value in the first cell of last row, which is 5 in this case, simultaneously as I click last cell? Thanks in advance for the help and guidance.

To access the content of first cell in the same row as the clicked cell

this.parentElement.cells[0].innerHTML

[A Sandeep]

Thank You. It is working.