将输入从一个表单模板复制到另一个表单模板

Question

我有一个包含两个单独部分的表格。我正在尝试在键入时将顶部的输入（特别是unit_price输入）复制到第二部分（尤其是price_from_above部分）。这是模板的代码：

<script id="line-template" type="text/x-handlebars-template">
<tr>
<td class="td-sm">
  <input name="purchase_order[items][][code]" placeholder="Code" class="form-control purchase_order_line_code" value="{{ item.code }}" autocomplete="off">
  <input type="hidden" name="purchase_order[items][][id]" value="{{ item.id }}">
</td>
<td class="td-sm"><input name="purchase_order[items][][quantity]" data-name="quantity" placeholder="0" class="form-control" value="{{ item.quantity }}"></td>
<td class="td-sm"><input name="purchase_order[items][][unit_of_measure]" placeholder="Units" class="form-control" value="{{ item.unit_of_measure }}"></td>
<td class="td-md"><input name="purchase_order[items][][lf_sf_each]" data-name="lf_sf_each" placeholder="0" class="form-control" value="{{ item.unit_each }}"></td>
<td><input name="purchase_order[items][][description]" placeholder="Description" class="form-control purchase_order_line_description" value="{{ item.description }}"></td>   
<td class="td-sm text-right"><span data-name="unit_breakdown">0</span></td>
<td class="td-sm text-right"><input name="purchase_order[items][][unit_price]" data-name="unit_price" placeholder="0.00" class="form-control" value="{{ item.unit_price }}"></td>
<td class="td-sm text-right"><input name="purchase_order[items][][unit_amount]" data-name="unit_amount" placeholder="0.00" class="form-control" value="{{ item.unit_price }}"></td>
<td class="td-sm text-right"><span data-name="extend_price"></span></td>
<td class="td-sm text-right"><span data-name="price_per_pc">0</span></td>
<td class="td-sm text-right"><a href="#" onclick="$(this).parents('tr').remove(); return false" class="text-danger"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg></span></a></td>
</tr>
</script>



<script id="second-line-template" type="text/x-handlebars-template">
<tr>
<td class="td-sm text-right"><span data-name="print_number"></span></td>
<td class="td-sm text-right"><span data-name="description"></span></td>
<td class="td-sm"><input name="purchase_order[items][][quantity_ordered_extended]" data-name="quantity_ordered_extended" placeholder="0" class="form-control" value="{{ item.quantity_ordered_extended }}"></td>
<td class="td-md"><input name="purchase_order[items][][total_needed]" data-name="each" placeholder="0" class="form-control" value="{{ item.unit_each }}"></td>
<td class="td-sm text-right"><span data-name="price_from_above"></span></td>   
<td class="td-sm"><input name="purchase_order[items][][invoice_one]" data-name="quantity" placeholder="0" class="form-control" value="{{ item.quantity }}"></td>
<td class="td-sm text-right"><span data-name="invoice_dollar_one"></span></td>
<td class="td-sm"><input name="purchase_order[items][][invoice_two]" data-name="quantity" placeholder="0" class="form-control" value="{{ item.quantity }}"></td>
<td class="td-sm text-right"><span data-name="invoice_dollar_two"></span></td>
<td class="td-sm"><input name="purchase_order[items][][invoice_three]" data-name="quantity" placeholder="0" class="form-control" value="{{ item.quantity }}"></td>
<td class="td-sm text-right"><span data-name="invoice_dollar_three"></span></td>
<td class="td-sm"><input name="purchase_order[items][][total_recieved]" data-name="quantity" placeholder="0" class="form-control" value="{{ item.quantity }}"></td>


<td class="td-sm text-right"><a href="#" onclick="$(this).parents('tr').remove(); return false" class="text-danger"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg></span></a></td>
</tr>
</script>

我也有这个javascript：

  // PO lines
  $('#purchase-order-form-lines tbody tr').each(function(k, v) {
  var line = {};
  $('input[data-name]', v).each(function(i, c) {
  line[$(c).data('name')] = parseFloat($(c).val()) || 0;
  });

  line.unit_breakdown = line.quantity * line.lf_sf_each;
  line.extend_price = line.unit_breakdown * line.unit_price;
  line.price_per_pc = Math.round(line.extend_price * 100) / (line.quantity * 100);
  subtotal += line.extend_price;
  taxtotal = (taxPercent * subtotal) / 100;
  discounttotal = (discountPercent * subtotal) / 100;

  line.breakdown = line.quantity * line.each;
  line.total = line.breakdown * line.unit_price;
  line.received_total = ((line.received || 0) + (line.received_2 || 0) + (line.received_3 || 0) + (line.received_4 || 0) + (line.received_5 || 0)) * line.each * line.unit_price;
  receivedSubtotal += line.received_total;

  $('[data-name="unit_breakdown"]', v).html(line.unit_breakdown);
  $('[data-name="extend_price"]', v).html(line.extend_price);
  $('[data-name="price_per_pc"]', v).html(line.price_per_pc);

  $('[data-name="breakdown"]', v).html(line.breakdown);
  $('[data-name="total"]', v).html(line.total.formatMoney(2));
  $('[data-name="received_total"]', v).html(line.received_total.formatMoney(2));
  });

  // PO second lines
  $('#purchase-order-form-second-lines tbody tr').each(function(k, v) {
  var line = {};
  $('input[data-name]', v).each(function(i, c) {
    line[$(c).data('name')] = parseFloat($(c).val()) || 0;
  });

  line.print_number = 1;
  line.description = line.description;
  line.price_from_above = line.unit_price;

  $('[data-name="print_number"]', v).html(line.print_number);
  $('[data-name="second_description"]', v).html(line.second_description);
  $('[data-name="price_from_above"]', v).html(line.price_from_above);
  });

任何帮助和/或想法都将不胜感激。预先感谢。