Error adding more fields with django-autocomplete-light

[PieroPajares]

I have a problem and I am using 2 libraries : django-autocomplete-light and django-dynamic-formset. The 2 are very good at doing their job. The first is used to do autocomplete and the second to make django formsets are dynamic. but when you want to join these 2 a problem occurs

when a new field is created, it is added in that way.

Template:

{% extends 'base/base.html' %}
{% load static %}
{% block titulo%} Registrar venta {%endblock%}
{% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
   {% endblock %}
   {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ detalleformset.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
    </script>   
    {% endblock %}

Is there any way to fix this? I was reading and there is little information

[jpic]

Can you contribute an example to test_project?

[nameisnot]

@PieroPajares Have you been able to find a solution? I face exactly the same issue and am bogged down with it. It would be great to solve this once and for all (so many similar queries on the net), with such a nice widget being there and not being able to make full use of it!

@jpic Sir, I have a similar query here