如何在属性readonly应用后从每个td获取输入值？

Question

我构建了一个脚本，该脚本克隆了选中复选框here上父母的每个子行。

直到现在才开始工作。我希望每个子输入值都由ajax保存。但只有最后一个孩子才会回应。

JS

function cloneAllz(clsName) {
  var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
  //console.log($input1.attr('id'));//test master input
  $input1.on('input', function() {
    var $this = $(this);
    window.setTimeout(function() {
      if ($('input.' + clsName).is(':checked')) {
        var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
        $child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
          console.log($this.attr('id'));
        });

        $input1.attr('readonly', false);
      } else {
        $('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
      }
    }, 0);
  });
}

HTML

<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>

所以问题是：如何回显每一行输入以通过ajax保存数据???

function cloneAllz(clsName) {
  var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
  //console.log($input1.attr('id'));//test master input
  $input1.on('input', function() {
    var $this = $(this);
    window.setTimeout(function() {
      if ($('input.' + clsName).is(':checked')) {
        var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
        $child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
          console.log($this.attr('id'));//only first row echoed twice!
        });

        $input1.attr('readonly', false);
      } else {
        $('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
      }
    }, 0);
  });
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>