Javascript 两个表共享输入

我有两个表格，填写完字段后，顶部需要将输入共享到底部。输入需要逐行匹配（不是所有添加的内容或一个字段中的所有内容）。我相信我非常接近，我只是有一个问题，让它工作

这些是我的桌子：

<script id="line-template" type="text/x-handlebars-template">
  <tr>
  <td class="td-sm text-left number"><span data-name="print_number"></span></td>
  <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]" data-name="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 first"><input name="purchase_order[items][][unit_price]" data-name="unit_price" placeholder="0.00" class="form-control unit_price" 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-left"><span data-name="second_print_number"></span></td>
    <td class="td-sm text-left"><span data-name="second_description"></span></td>
    <td class="td-sm text-left"><span data-name="quantity_ordered_extended"></span></td>
    <td class="td-sm text-right"><span data-name="total_needed"></span></td>
    <td class="td-sm text-right"><span data-name="above_price"></span></td>

    <td class="td-sm text-right"><input name="purchase_order[items][][invoice_one]" data-name="invoice_one" placeholder="0" class="form-control" value="{{ item.invoice_one }}"></td>
    <td class="td-sm text-right"><span data-name="invoice_dollar_one"></span></td>
    <td class="td-sm text-right"><input name="purchase_order[items][][invoice_two]" data-name="invoice_two" placeholder="0" class="form-control" value="{{ item.invoice_two }}"></td>
    <td class="td-sm text-right"><span data-name="invoice_dollar_two"></span></td>
    <td class="td-sm text-right"><input name="purchase_order[items][][invoice_three]" data-name="invoice_three" placeholder="0" class="form-control" value="{{ item.invoice_three }}"></td>
    <td class="td-sm text-right"><span data-name="invoice_dollar_three"></span></td>
    <td class="td-sm text-right"><span data-name="total_recieved"></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>

我试图让单价列从上表逐行转到下表。我意识到这是很多代码，我只是想确保它们都在那里供参考

我在网上找到了这段代码，并一直试图对其进行操作，以便实现我的目标，但到目前为止，我还无法让它完全实现我的目标：

 $("#purchase-order-form-lines, #purchase-order-form-second-lines").on('click', '.btnSelection', function() {
    // get the current row
    var currentRow = $(this).closest("tr");

    var col1 = currentRow.find(".first").html(); // get current row 1st table cell TD value

    var data = col1;
  });

---

任何想法或意见都将不胜感激，因为我一直在努力解决这个问题

大家好，欢迎来到Stack Overflow！如果你把你的工作代码放在像codepen.io这样的东西上，这会很有帮助，这样我们可以更好地帮助你。这段代码对于你试图做的事情来说非常复杂。少写多做——jquery您的几个变量（例如，

viewFirstSubtotal

）似乎是作为隐式全局变量创建的。这可能会导致非常奇怪的问题…建议添加

“使用严格”位于脚本标记的顶部。如果有未声明的变量而不是隐式全局变量，则会出错。我忘了提到这是ruby on rails项目的一部分，但我可以尝试制作一个codepen，但我不确定它与我的完整ruby项目相比会有多好。我知道@kemicofa我实际上是从以前的同事那里继承了这个项目，所以我正在尽我所能，尤其是对于代码和ruby来说，但是你有什么有用的想法或意见来实现我的目标吗？@如果我清楚地知道最终目标是什么，我可能是专业上不称职的。我承认，理解所有这些代码的努力似乎很累。如果你能让我清楚地了解你想做什么，我可以提供一个脚本，为你指明正确的方向。
 $("#purchase-order-form-lines, #purchase-order-form-second-lines").on('click', '.btnSelection', function() {
    // get the current row
    var currentRow = $(this).closest("tr");

    var col1 = currentRow.find(".first").html(); // get current row 1st table cell TD value

    var data = col1;
  });