Две таблицы разделяют ввод

Question

У меня есть две таблицы, верхняя часть должна делиться вводом с нижней после заполнения поля.Входные данные должны соответствовать строка за строкой (не все добавлено или все в одном поле).Я думаю, что я очень близок, у меня просто проблема с тем, чтобы заставить его работать.

Это мои таблицы:

<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>

Это 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;
    });

    price_from_above = line.unit_price; 
    quantity_from_above = line.quantity;
    description_from_above = line.description;

    line.print_number = 1;

    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="print_number"]', v).html(line.print_number);
    $('[data-name="unit_breakdown"]', v).html(line.unit_breakdown);
    $('[data-name="extend_price"]', v).html(line.extend_price.formatMoney(2));
    $('[data-name="price_per_pc"]', v).html(line.price_per_pc.formatMoney(2));

    $('[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 secondline = {};
      $('input[data-name]', v).each(function(i, c) {
        secondline[$(c).data('name')] = parseFloat($(c).val()) || 0;
      });

      secondline.second_print_number = 2;
      secondline.second_description = description_from_above;
      secondline.quantity_ordered_extended = quantity_from_above;
      secondline.total_needed = quantity_from_above - secondline.invoice_one - secondline.invoice_two - secondline.invoice_three;
      secondline.above_price = data;

      secondline.invoice_dollar_one = secondline.above_price * secondline.invoice_one;
      secondline.invoice_dollar_two = secondline.above_price * secondline.invoice_two;
      secondline.invoice_dollar_three = secondline.above_price * secondline.invoice_three;

      secondline.total_recieved = secondline.invoice_dollar_one + secondline.invoice_dollar_two + secondline.invoice_dollar_three;

      viewFirstSubtotal = secondline.invoice_dollar_one;
      viewSecondSubtotal = secondline.invoice_dollar_two;
      viewThirdSubtotal = secondline.invoice_dollar_three;

      second_discount = discountPercent;
      viewFirstDiscount = (discountPercent * secondline.invoice_dollar_one) / 100;
      viewSecondDiscount = (discountPercent * secondline.invoice_dollar_two) / 100;
      viewThirdDiscount = (discountPercent * secondline.invoice_dollar_three) / 100;

      second_tax = taxPercent;
      viewFirstTax = (taxPercent * secondline.invoice_dollar_one) / 100;
      viewSecondTax = (taxPercent * secondline.invoice_dollar_two) / 100;
      viewThirdTax = (taxPercent * secondline.invoice_dollar_three) / 100;

      viewFirstTotalInvoice = viewFirstSubtotal - viewFirstDiscount + viewFirstTax;
      viewSecondTotalInvoice = viewSecondSubtotal - viewSecondDiscount + viewSecondTax;
      viewThirdTotalInvoice = viewThirdSubtotal - viewThirdDiscount + viewThirdTax;

      $('[data-name="second_print_number"]', v).html(secondline.second_print_number);
      $('[data-name="second_description"]', v).html(secondline.second_description);
      $('[data-name="quantity_ordered_extended"]', v).html(secondline.quantity_ordered_extended);
      $('[data-name="total_needed"]', v).html(secondline.total_needed);
      $('[data-name="above_price"]', v).html(secondline.above_price);

      $('[data-name="invoice_dollar_one"]', v).html(secondline.invoice_dollar_one.formatMoney(2));
      $('[data-name="invoice_dollar_two"]', v).html(secondline.invoice_dollar_two.formatMoney(2));
      $('[data-name="invoice_dollar_three"]', v).html(secondline.invoice_dollar_three.formatMoney(2));
      $('[data-name="total_recieved"]', v).html(secondline.total_recieved.formatMoney(2));
    });

Я пытаюсь получить столбец для цены за единицу, чтобы перейти от верхней таблицы к нижней строке за строкой.Я понимаю, что это много кода, я просто хотел убедиться, что это все для справки.

Я нашел этот код в Интернете и пытался манипулировать им, чтобы я мог достичь своей цели, но такДо сих пор я не смог заставить его делать именно то, что я хочу:

 $("#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;
  });

Буду очень признателен за любые мысли или замечания, поскольку я уже некоторое время пытаюсь понять это.