Ggtcf

I have inherited a ruby on rails project from a previous coworker that has two dynamic tables one on top of the other. The table on the top sends some input to the bottom table.

The bottom table is filled out halfway and then needs the invoice 1 2 and 3 to be filled in manually (this will also fill in the dollar amounts through math).

The issue I am having is when I have more then one row and click the save button at the bottom of the page the invoice 1 2 and 3 will all shift down to the bottom row and create more rows that weren't there before.

This is my code for the bottom table:

<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 colspan ="2" 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>
 </tr>
</script>

and this is my javascript for the bottom table:

 $('#purchase-order-form-second-lines tbody tr').each(function(k, v) 
 var secondline = ;
 $('input[data-name]', v).each(function(i, c) );

 elem = $('#purchase-order-form-lines tbody tr').eq(k);

 line = ;
 $('input[data-name]', elem).each(function(i, c) 
 line[$(c).data('name')] = parseFloat($(c).val()) );


 secondline.second_print_number = k +1;
 secondline.second_description = line.description;
 secondline.quantity_ordered_extended = line.quantity;
 secondline.total_needed = line.quantity - secondline.invoice_one - secondline.invoice_two - secondline.invoice_three;
 secondline.above_price = line.unit_price;

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

The code for the top table is essentially the same with a few labels changed. Any help or input or ideas of how I could even begin to fix this issue would be very much appreciated. Also I apologize for the huge size of this post and I appreciate you sticking through to the end to read all of this :^D