Django + htmx не работает внутри формы

Здравствуйте, я хочу использовать htmx внутри формы и отправлять данные в базу данных и одновременно добавлять информацию из формы в таблицу под ней, не совсем таблицу, а придуманную таблицу с div и css тайлами, я пытался добавить htmx теги внутри формы, но она отправляет данные в базу данных, но не добавляет их одновременно в таблицу под ней и мне приходится обновлять страницу, чтобы увидеть это, То же самое происходит, когда я удаляю или помечаю работу как выполненную, я пробовал способ, которым я поместил свои коды, но css испортился, и я не могу управлять стилем css, если я добавляю div внутри формы, а затем добавляю теги htmx внутри div, стиль сильно портится, поэтому мне нужно, чтобы вы, ребята, помогли мне, если есть другой способ.

это представление я отправляю все данные базы в таблицу под формой

def todo_subjets_list(request):
course = request.GET.get("todo_subjets")
modules = Todo_subject.objects.filter(subject=course)
context = {"modules": modules}
print(context)
return render(request, "second_todo/todo_modules.html", context)

а это функция представления, с помощью которой я добавляю форму. вот код

def add_second_todo(request):
todo = None
title = request.POST.get("title", "")
todo_subjets = request.POST.get("todo_subjets", "")
Todo_course = request.POST.get("Todo_course", "")
todo_subjets_ = Subject.objects.get(pk=int(todo_subjets))
Todo_course_ = Todo_subject.objects.get(pk=int(Todo_course))

if (title, todo_subjets_, Todo_course_):
    todo = Second_Todo.objects.create(
        title=title, subject=todo_subjets_, todo_subject=Todo_course_
    )
return render(request, "second_todo/article_list.html", {"todo": todo})

а это html код, который я использую для добавления формы и одновременного добавления информации в таблицу под ней

это html файл, который я включаю внутрь todo_modules.html

<select class="form-select appearance-none
block
w-full
px-3
py-1.5
mx-4
text-base
font-normal
text-secondary-700
bg-white bg-clip-padding bg-no-repeat
border border-solid border-secondary-300
rounded
transition
ease-in-out
m-0
focus:text-secondary-700 focus:bg-white focus:border-blue-600 focus:outline-none"
name="Todo_course">
<option selected>Open this select menu</option>
{% for todo_subject in modules %}
    <option value="{{todo_subject.pk}}">{{ todo_subject.name }}</option>
{% endfor %}

это второй html файл, который я включаю внутрь, article_list.html

<form
    hx-target="this"
    hx-swap="outerHTML"
    hx-put ="{% url 'update_second_todo' Second_Todo.pk %}"

>

    <article  class="flex {% if Second_Todo.is_done %} bg-green-50 {% endif %}"
    >
        <div class="w-4/5 py-3">
            <p class="px-6 text-xs text-gray-900">{{Second_Todo.title }}</p>
        </div>
        <div class="w-1/5 px-6 py-3 flex justify-end space-x-4">
            {% if not Second_Todo.is_done %}
                <button href="#" class="text-primary-600 hover:text-primary-900">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            {% endif %}
            {% if  Second_Todo.is_done %}
                <button href="#" class="text-primary-600 hover:text-primary-900">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                </button>
            {% endif %}
            <a
                href="#"
                class="text-danger-600 hover:text-danger-900"
                hx-confirm ="Are you sure?"
                hx-target="closest form"
                hx-swap="outerHTML swap:1s"
                hx-delete= "{% url 'delete_second_todo' Second_Todo.pk %}"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
            </a>
        </div>
    </article>
</form>

скриншот того, что я делаю введите описание изображения здесь

Вернуться на верх