Incrementing function argument after jQuery .clone()

I have a php script that prints out price values for current page in a table. Each row is a different price for 1 product and can be edited.

<table border="0" cellpadding="5" cellspacing="0" class="content" id="page_prices">
<thead>
  <tr>
      <th>description</th>
        <th>sku</th>
        <th>single</th>
        <th>quantity</th>
        <th>price</th>
        <th>currency</th>
        <th width="25"></th>
</thead>
<tbody> 

<?php
for($i=0; $i<$count_prices; $i++)
{
  echo "<tr>";
  echo "<td><input name="price_description[]" type="text" id="price_description" size="20" value="".$prices[$i]['description']."">";
  echo "<td><input name="price_code[]" type="text" id="price_code" size="5" value="".$prices[$i]['code']."">";
  echo "<td><input name="price_pcs[]" type="text" id="price_pcs" size="5" value="".$prices[$i]['pcs']."">";
  echo "<td><input name="price_qty[]" type="text" id="price_qty" size="5" value="".$prices[$i]['qty']."">";
  echo "<td><input name="price_value[]" type="text" id="price_value" size="10" maxlength="10" value="".$prices[$i]['price_value']."" onChange = "CalcSale(this.form, $i);">";
  
  echo "<td><input name="otstupka_pr[]" type="text" id="otstupka_pr" size="5" value="0" onChange = "CalcPerc(this.form, $i);">";
  echo "<td><input name="regular_price[]" type="text" id="regular_price" size="5" value="".$prices[$i]['real_price']."" onChange = "CalcSale(this.form, $i);">";
  echo "<td><input name="valid_to[]" type="date" id="valid_to" size="10" maxlength="10" value="".$prices[$i]['valid_to']."">";
  echo "<td>";
  echo "</tr>";
}

?>
  </tbody>
<tfoot>
    <tr><td colspan="7"> <a href="javascript: void(0)" id="add_page_price" class="add">Add price</a>
  </tfoot>
  </table>

There are 2 functions that calculate based on user input: CalcSale and CalcPerc. Each of them uses the value of the input and the counter $i in order to calculate separately on every row. When a user decides to add a new price and clicks on add_page_price the last row is cloned with:

$j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})

The question is: How can I clone the last row and increment the argument $i in the onChange = "CalcSale(this.form, $i);"

Answer

How can I clone the last row and increment the argument $i in the onChange = "CalcSale(this.form, $i);"

I wouldn’t do that at all. I’d suggest using modern event handling, probably involving event delegation:

1. Don’t output an onChange attribute on the input elements, but do include either classes or data-* attributes on them (perhaps price-value and regular-price classes).

2. Change the CalcSale function to accept a DOM event.

function CalcSale(event) { // <== Consider using standard JavaScript convention: `calcSale`
   const row = $j(event.target).closest("tr");
   const priceValue = row.find(".price-value");
   const regularPrice = row.find(".regular-price");
   // ...use `priceValue` and `regularPrice` jQuery objects
}

3. Hook up CalcSale like this:

$j("#page_prices").on("change", ".price-value, .regular-price", CalcSale);

(Consider adding the input event too: .on("change input"…)

Then your cloning code doesn’t have to worry about incrementing a counter (and it’s easier to remove rows as well), and your existing code works:

// (Not changed)
$j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})