I am creating a Recipe app- currently for my form I have Title, Ingredients and Description as text inputs. However I want the user to be able to individually input the ingredients so I can manipulate the inputted data- for instance I want Carrot | 700 | g to come in as three inputs rather than currently where it comes in as text.

So my question a) would be how you can horizontally supply form inputs so I can take the three values together side by side a.k.a Ingredient: Input1(textfield) | Input 2(int) | Input 3(dropdown menu)

question b) is how you can allow for the user to add an additional field on a button click. I won’t know how many ingredients they want to input so by default I would give maybe 5 rows of input and then when they button press it allows them to input a new row?

New to Django so appreciate the help and some direction on where I should be going with this- is the easiest solution to use ArrayFields and Javascript? I am more experienced with Python but can figure it out with Javascript if that is the way to go-

Here is the relevant code:

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 %}