date in multiple table rows

Question

im trying to create a new date in a new table row each time i click a button but it shows an error "document.getElementById("mydate"+no).innerHTML = day + "/" + month + "/" + year; is null" below is the fiddle with all the code to understand better what i want

function getmyDate(no) {
    d = new Date();
    year = d.getFullYear();
    month = d.getMonth() + 1;
    day = d.getDate();
    document.getElementById("mydate"+no).innerHTML = day + "/" + month + "/" + year;
    }

https://jsfiddle.net/9gc1y3bu/

Answer 1

Firstly remove the function calls made together here and only add_row() will be called.

<button id="btn" type="button" onclick="add_row();">

Secondly, after the row is added in the table then call the getmyDate method.

//ADD ROWS//
function add_row() {
  if (tbody.rows.length > 20) {
    return;
  }
  new_from = document.getElementById("new_from").value;
  new_to = document.getElementById("new_to").value;

  var table = document.getElementById("data_table");
  var table_len = table.rows.length - 1;
  var row = (table.insertRow(table_len).outerHTML =
    "<tr id='row" +
    table_len +
    "'><td id='serial" +
    table_len +
    "'></td><td id='mydate" +
    table_len +
    "'></td><td id='from" +
    table_len +
    "'>" +
    new_from +
    "</td><td id='to" +
    table_len +
    "'>" +
    new_to +
    "</td><td id='wage" +
    table_len +
    "'></td><td><i class='far fa-edit' id='editrow" +
    table_len +
    "' onclick='edit_row(" +
    table_len +
    ")'></i> <i class= 'far fa-save' id='saverow" +
    table_len +
    "' onclick='save_row(" +
    table_len +
    ")'></i><i class='far fa-trash-alt' onclick='delete_row(" +
    table_len +
    ")'></i></td></tr>");

  document.getElementById("new_from").value = "";
  document.getElementById("new_to").value = "";

 getmyDate(table_len); //======> here and pass the number

}

Working Example: https://jsfiddle.net/mrAhmedkhan/0def93vt/