Счетчик forloop с помощью htmx django

Следуя учебникам, мне удалось сделать форму, которая добавляет элементы заказа с помощью htmx. Каждый новый пункт заказа - это строка div, а не строка таблицы. У меня также есть счетчик forloop для каждой строки, но после добавления новой позиции заказа счетчик не обновляется динамически, только после обновления страницы.

Связанный (как я думаю) код:

order-create-update.html:

{% extends 'partials/base.html' %}

{% block content %}

<style>
  .orderitem-form {
    border-bottom: 1px solid black;
  }
</style>

<div class="container-fluid" style="margin-top:80px">
    {% include 'orders/order_form_full.html' %}

<hr>   
  <div class="row" style="margin-bottom:5px; border-bottom-style:solid; border-bottom-width:1px">
      <div class="col-1" style="font-weight: bold">Item #</div>
      <div class="col-2" style="font-weight: bold">Material Category</div>
      <div class="col-2" style="font-weight: bold">Material Subcategory</div>
      <div class="col-4" style="font-weight: bold">Material</div>
      <div class="col-1" style="font-weight: bold">Quantity</div>
      <div class="col-1" style="font-weight: bold">Price/Unit</div>  
      <div class="col-1" style="font-weight: bold">Action</div>  
  </div>

  {% for orderitem in object.get_orderitems_children %} 
  {% include "orders/order_item_inline.html" with object=orderitem %}  
  {% endfor %}

  {% if new_orderitem_url %}  
  <div id="orderitem-create"></div>  
  {% endif %}
  <button type="button" class="btn btn-secondary" hx-get="{{ new_orderitem_url }}" hx-trigger="click" hx-target="#orderitem-create" hx-swap="beforeend">Add order item</button>                                                                                                                                                                                                                                                                               
</div>
{% endblock %}

order_item_inline.html:

<div id="orderitem-{{ object.id }}">
    <div class="row mt-1">        
        <div class="col-1">{{ forloop.counter }}</div>        
        <div class="col-2">{{ object.material_category }}</div>
        <div class="col-2">{{ object.material_subcategory }}</div>
        <div class="col-4">{{ object.material }}</div>
        <div class="col-1">{{ object.quantity_ordered }}</div>
        <div class="col-1">{{ object.material.price }}</div>  
        <div class="col-1"> 
            <button type="button" class="btn btn-secondary btn-sm" hx-trigger="click" hx-get="{{ object.get_hx_edit_url }}" hx-target="#orderitem-{{ object.id }}">Edit</button>
        </div>           
    </div>
</div>

Чего-то не хватает, но после поисков ответа в течение нескольких дней я не могу понять...

Спасибо за помощь.

{% for orderitem in object.get_orderitems_children %}
    {{ forloop.counter }}
    {% include "orders/order_item_inline.html" with object=orderitem %}  
{% endfor %}