jqueryUI datepicker in wrong cell

I noticed a strange behavior in my table. I populate a table from JSON data, each row contains 3 cells. A checkbox followed by two data cells. This works like charm. Further I added the default jQueryUI datepicker, which should appear if the last cell is clicked. But instead the last cell the datepicker appears if the checkbox at the row beginning is clicked.

Any idea why?

var dates = [
  {
                "reason": "Date 1",
                "date": "01.01.2021"
            },
            {
                "reason": "Date 2",
                "date": "04.04.2021"
            },
            {
                "reason": "Date 3",
                "date": "08.08.2021"
            },
            {
                "reason": "Date 4",
                "date": "12.12.2021"
            }
]

 var table = document.getElementById("date-table")

createDateTable(dates)

function createDateTable(dates) {
       table.innerHTML = "";
        for (var i = 0; i < dates.length; i++) {
            dateRow =   `<tr id="row-${i}">
                            <td><input type=checkbox></td>
                            <td contenteditable='true'>${dates[i].reason}</td>
                            <td>${dates[i].date}</td>
                        </tr>`
            table.innerHTML += dateRow
        }


        $("#date-table tr").each(function () {
            $(this).find("td :last").datepicker({
                dateFormat: "dd.mm.yy",
                showOtherMonths: true,
                selectOtherMonths: true
            })
        })
    }
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
    <table id="date-table">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>


</body>

</html>

Answer

You need to use input to make it work like:

var dates = [{
    "reason": "Date 1",
    "date": "01.01.2021"
  },
  {
    "reason": "Date 2",
    "date": "04.04.2021"
  },
  {
    "reason": "Date 3",
    "date": "08.08.2021"
  },
  {
    "reason": "Date 4",
    "date": "12.12.2021"
  }
]

var table = document.getElementById("date-table")

createDateTable(dates)

function createDateTable(dates) {
  table.innerHTML = "";
  for (var i = 0; i < dates.length; i++) {
    dateRow = `<tr id="row-${i}">
                            <td><input type=checkbox></td>
                            <td contenteditable='true'>${dates[i].reason}</td>
                            <td><input type='text' class='datapickerme' value='${dates[i].date}'></td>
                        </tr>`
    table.innerHTML += dateRow
  }

  $('.datapickerme').datepicker({
    dateFormat: "dd.mm.yy",
    showOtherMonths: true,
    selectOtherMonths: true
  });

}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
    <table id="date-table">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>


</body>

</html>

And i use class instead of find the last td.