Dynamically fill out multi-row form with htmx & jinja

Question

I have a large order form which contains a table (and some fields outside the table too). I would like to dynamically populate last cell of each row based on the values entered. I'm using jinja.

Here is what my rows look like:

<tr> 
<td> <input type="text" name="{{ row[0] }}_catalog_number" value="{{ row[1] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_description" value="{{ row[2] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_qty" value="{{ row[3] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_rate" 
                        placeholder="$" 
                        hx-trigger="keyup changed delay:500ms" 
                        hx-target="#{{row[0]}}-row-total" 
                        hx-swap="innerHTML"  hx-put="/{{row[0]}}/getitemtotal"> </td>
<td id="{{row[0]}}-row-total"> <input type="text" name="{{ row[0] }}_total" placeholder="$"> </td> 
</tr> 

The issue: no requests are getting sent...

{{ row[0] }} is an identifier unique for each row. I inspected the HTML and everything gets rendered as expected. HTMX as such works on the page, and the problem doesn't appear to be table related (removing the table and just leaving the input fields didn't help).

I suspect that hx-target="#{{row[0]}}-row-total" may be to blame because if I remove the {{row[0]}}- from the td id and from the hx-target, requests do go out (but the response will land in the first #row-total available, which may not be the right one).