Создание объекта и отображение его на одной странице с htmx

Функция, которую я пытаюсь реализовать, заключается в том, что когда форма отправляется в представлении create, я хотел бы отобразить созданный объект под ней без обновления страницы. Я знаю, что это можно реализовать через HTMX. Создаваемый объект - это ключ, который является уникальным и генерируется случайным образом. Однако он не работает должным образом. В данный момент при первом нажатии на кнопку создается ключ и отображается, но при втором нажатии он пытается показать предыдущий ключ, а поскольку он уже существует, он не уникален и поэтому ничего не показывает.

Это модель

class Key(models.Model):
    key = models.CharField(max_length=10, null=False, default=get_random_string(length=10), unique=True)
    amount = models.IntegerField(default=1)
    created = models.DateTimeField(auto_now_add=True)

    def get_absolute_url(self):
        return reverse("key", kwargs={"id": self.id })

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

@login_required
def key_create_view(request):
    form = CreateKeyForm(request.POST or None)

    context = {
        "form": form,
    }
    if form.is_valid():
        obj = form.save(commit=False)
        obj.save()
        kod_url = reverse('key', kwargs={'id':obj.id})
        if request.htmx:
            context = {
                 "object": obj,
                 "key_url": key_url
             }
            return render(request, "base/components/key.html", context)
        #return redirect(obj.get_absolute_url())
    return render(request, "base/form.html", context)  



@login_required
def key_detail_hx_view(request, id=None):
    if not request.htmx:
        raise Http404
    try:
        obj = Key.objects.get(id=id)
    except:
        obj = None
    if obj is  None:
        return HttpResponse("Something went wrong")
    context = {
        "object": obj
    }
    return render(request, "base/components/key.html", context) 

В шаблоне я построил его следующим образом

<form action="" method="POST">
            {% csrf_token %}
            <div id="key" class="text-center">
                <button hx-post="{{key.url}}" hx-target="#key" hx-swap="beforeend" type="submit">Create new key</button>
            </div>
        </form>

Я бы хотел, чтобы при каждом нажатии кнопки генерировался новый ключ и заменял предыдущий. Кто-нибудь знает, как я могу это реализовать?

<form action="" method="POST">
  {% csrf_token %}
  <div class="text-center">
    <button hx-post="{% url 'create_key' %}" hx-target="#key" type="submit">Create new key</button>
  </div>
</form>

<!-- HTMX will swap the returned key here -->
<div id="key"></div>