Django Добавьте кнопку, которая при каждом нажатии создает новое поле для ввода

Я создаю приложение для рецептов - в настоящее время для моей формы у меня есть название, ингредиенты и описание в качестве текстовых входов. Однако я хочу, чтобы пользователь мог индивидуально вводить ингредиенты, чтобы я мог манипулировать введенными данными - например, я хочу, чтобы морковь | 700 | г вводилась как три ввода, а не как сейчас, когда она вводится как текст.

Итак, мой вопрос a) как можно горизонтально расположить входы формы, чтобы я мог взять три значения вместе бок о бок, т.е. Ingredient: Input1(textfield) | Input 2(int) | Input 3(dropdown menu)

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

Новичок в Django, поэтому буду признателен за помощь и подсказку, куда мне следует двигаться - самое простое решение использовать ArrayFields и Javascript? Я более опытен с Python, но могу разобраться с Javascript, если это тот путь, который нужно пройти-

Вот соответствующий код:

views.py

class RecipeCreateView(LoginRequiredMixin, CreateView):
    model = models.Recipe
    fields = ['title', 'ingredients', 'description']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)`

recipe_form.html

{% extends 'recipes/base.html' %}
{% load tailwind_filters %}

{% block content %}
<div>
    <h1 class="text=2x1 my-4">Add Recipe!</h1>
    <form method="POST">
        {% csrf_token %}
        {{ form|crispy }}
        <input class="px-8 py-2 text-white bg-orange-600 rounded-lg hover:bg-orange-700 hover:cursor-pointed" type="submit" value="Save">
    </form>
    <div class="border-top pt-3">
        <a href="{% url 'recipes-home' %}">Cancel</a>
    </div>
</div>
{% endblock content %}

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