如何将值从一个输入框复制到另一个输入框？

Question

通过单击添加新行按钮，可以生成新的输入框。我想将值从一个输入框（第一列 - 小时）复制到另一个输入框（第二列 - 在办公室）。

截屏：

第一行：当值是静态元素时，将值从一个输入框复制到另一个输入框。这里的输入框是由 HTML 创建的。

动态行：当它是一个动态元素时，值不会从一个输入框复制到另一个输入框。这里的输入框是由 JavaScript 创建的。

问题：

值不会被复制，因为元素是动态生成的，具有相同的id和name

我试过的：

$(document).ready(function() {

  $('[data-toggle="tooltip"]').tooltip();

  var actions = $("table td:last-child").html();

  // Append table with add row form on add new button click

  $(".add_new").click(function() {

    var index = $("table tbody tr:last-child").index();

    var row = '<tr>' +

      '<td><input type="number" name="hours[]" id="hours"></td>' +

      '<td><input type="number" name="inoffice[]" id="inoffice"></td>' +

      '</tr>';

    $("table").append(row);

    $('[data-toggle="tooltip"]').tooltip();

  });

  // Add row on add button click

  $(document).on("click", ".add", function() {

    var empty = false;

    var input = $(this).parents("tr").find('input[type="text"]');

    input.each(function() {

      if (!$(this).val()) {

        $(this).addClass("error");

        empty = true;

      } else {

        $(this).removeClass("error");

      }

    });

    $(this).parents("tr").find(".error").first().focus();

    if (!empty) {

      input.each(function() {

        $(this).parent("td").html($(this).val());

      });

    }

  });

});

function sync() {

  var hours = document.getElementById('hours');

  var inoffice = document.getElementById('inoffice');

  inoffice.value = hours.value;

}