How to reload Javascript/Jquery after adding new content

Question

I have a table inside a form, where I can add more rows. when I change a value inside a cell, it should run a ajax function. this is working fine on the first row (loaded on page load), but when I add more rows, the function will not affect on the others.

what can I do to to use $("form :input").change('input', urenForm); also on the new rows?

This is not the original script but the main part is in it to show my problem (original is too much to post)

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});

(function($) {
  function urenForm() {
    event.preventDefault();

    var target = event.target,
      parent = null;

    for (; target && target !== document; target = target.parentNode) {
      if (target.matches('tr')) parent = target;
    }

    var childnodes = parent.querySelectorAll('input, select'),
      data = new FormData();

    for (var i = 0; i < childnodes.length; i++) {
      var child = childnodes[i];
      data.append(child.name, child.value);
    }

    $.ajax({
      url: 'ajax.php',
      dataType: 'json',
      type: 'post',
      data: data,
      processData: false,
      contentType: false,
      success: function(data, textStatus) {
        alert('Changed');
      }
    });
  };
  $("form :input").change('input', urenForm);
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <table id="myTable" class=" table order-list">
      <thead>
        <tr>
          <td>Name</td>
          <td>Gmail</td>
          <td>Phone</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-sm-4"><input type="text" name="name" class="form-control" /></td>
          <td class="col-sm-4"><input type="mail" name="mail" class="form-control" /></td>
          <td class="col-sm-3"><input type="text" name="phone" class="form-control" /></td>
          <td class="col-sm-2">
            <a class="deleteRow"></a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" style="text-align: left;"><input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /></td>
        </tr>
      </tfoot>
    </table>
  </form>
</div>