Dynamic Flask-WTF fields

## app.py
# -*- coding: utf-8 -*-
# app.py

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from wtforms import Form, FieldList, FormField, IntegerField, StringField, \
        SubmitField


class LapForm(Form):
    """Subform.

    CSRF is disabled for this subform (using `Form` as parent class) because
    it is never used by itself.
    """
    runner_name = StringField('Runner name')
    lap_time = IntegerField('Lap time')


class MainForm(FlaskForm):
    """Parent form."""
    laps = FieldList(
        FormField(LapForm),
        min_entries=1,
        max_entries=20
    )


# Create models
db = SQLAlchemy()


class Race(db.Model):
    """Stores races."""
    __tablename__ = 'races'

    id = db.Column(db.Integer, primary_key=True)


class Lap(db.Model):
    """Stores laps of a race."""
    __tablename__ = 'laps'

    id = db.Column(db.Integer, primary_key=True)
    race_id = db.Column(db.Integer, db.ForeignKey('races.id'))

    runner_name = db.Column(db.String(100))
    lap_time = db.Column(db.Integer)

    # Relationship
    race = db.relationship(
        'Race',
        backref=db.backref('laps', lazy='dynamic', collection_class=list)
    )


# Initialize app
app = Flask(__name__)
app.config['SECRET_KEY'] = 'sosecret'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db.init_app(app)
db.create_all(app=app)


@app.route('/', methods=['GET', 'POST'])
def index():
    form = MainForm()

    if form.validate_on_submit():
        # Create race
        new_race = Race()

        db.session.add(new_race)

        for lap in form.laps.data:
            new_lap = Lap(**lap)

            # Add to race
            new_race.laps.append(new_lap)

        db.session.commit()


    races = Race.query

    return render_template(
        'index.html',
        form=form,
        races=races
    )


@app.route('/<race_id>', methods=['GET'])
def show_race(race_id):
    """Show the details of a race."""
    race = Race.query.filter_by(id=race_id).first()

    return render_template(
        'show.html',
        race=race
    )


if __name__ == '__main__':
    app.run()

## index.html
{# templates/index.html #}
<html>
    <head>
        <title>Lap logging</title>

        {# Import JQuery #}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
            /**
             * Adjust the indices of form fields when removing items.
             */
            function adjustIndices(removedIndex) {
                var $forms = $('.subform');

                $forms.each(function(i) {
                    var $form = $(this);
                    var index = parseInt($form.data('index'));
                    var newIndex = index - 1;

                    if (index < removedIndex) {
                        // Skip
                        return true;
                    }

                    // Change ID in form itself
                    $form.attr('id', $form.attr('id').replace(index, newIndex));
                    $form.data('index', newIndex);

                    // Change IDs in form inputs
                    $form.find('input').each(function(j) {
                        var $item = $(this);
                        $item.attr('id', $item.attr('id').replace(index, newIndex));
                        $item.attr('name', $item.attr('name').replace(index, newIndex));
                    });
                });
            }

            /**
             * Remove a form.
             */
            function removeForm() {
                var $removedForm = $(this).closest('.subform');
                var removedIndex = parseInt($removedForm.data('index'));

                $removedForm.remove();

                // Update indices
                adjustIndices(removedIndex);
            }

            /**
             * Add a new form.
             */
            function addForm() {
                var $templateForm = $('#lap-_-form');

                if (!$templateForm) {
                    console.log('[ERROR] Cannot find template');
                    return;
                }

                // Get Last index
                var $lastForm = $('.subform').last();

                var newIndex = 0;

                if ($lastForm.length > 0) {
                    newIndex = parseInt($lastForm.data('index')) + 1;
                }

                // Maximum of 20 subforms
                if (newIndex > 20) {
                    console.log('[WARNING] Reached maximum number of elements');
                    return;
                }

                // Add elements
                var $newForm = $templateForm.clone();

                $newForm.attr('id', $newForm.attr('id').replace('_', newIndex));
                $newForm.data('index', newIndex);

                $newForm.find('input').each(function(idx) {
                    var $item = $(this);

                    $item.attr('id', $item.attr('id').replace('_', newIndex));
                    $item.attr('name', $item.attr('name').replace('_', newIndex));
                });

                // Append
                $('#subforms-container').append($newForm);
                $newForm.addClass('subform');
                $newForm.removeClass('is-hidden');

                $newForm.find('.remove').click(removeForm);
            }


            $(document).ready(function() {
                $('#add').click(addForm);
                $('.remove').click(removeForm);
            });
        </script>

        <style>
            .is-hidden {
                display: none;
            }
        </style>
    </head>

    <body>
        <a id="add" href="#">Add Lap</a>

        {# Show all subforms #}
        <form id="lap-form" action="" method="POST" role="form">
            {{ form.hidden_tag() }}

            <div id="subforms-container">
                {% for subform in form.laps %}
                    <div id="lap-{{ loop.index0 }}-form" class="subform" data-index="{{ loop.index0 }}">
                        {{ subform.runner_name.label }}
                        {{ subform.runner_name }}

                        {{ subform.lap_time.label }}
                        {{ subform.lap_time}}

                        <a class="remove" href="#">Remove</a>
                    </div>
                {% endfor %}
            </div>

            <button type="submit">Send</button>
        </form>

        {% if form.errors %}
            {{ form.errors }}
        {% endif %}

        {# Form template #}
        <div id="lap-_-form" class="is-hidden" data-index="_">
            <label for="laps-_-runner_name">Runner name</label>
            <input id="laps-_-runner_name" name="laps-_-runner_name" type="text" value="">

            <label for="laps-_-lap_time">Lap time</label>
            <input id="laps-_-lap_time" name="laps-_-lap_time" type="text">

            <a class="remove" href="#">Remove</a>
        </div>


        {# Show submitted data #}
        {% if data is defined %}
            <p>Received data: {{ data }}</p>
        {% endif %}


        {# Show races #}
        {% for race in races %}
            <p><a href="{{ url_for('show_race', race_id=race.id) }}">Race {{ race.id }}</a></p>
        {% endfor %}
    </body>
</html>

## show.html
{# templates/show.html #}
<html>
    <head>
        <title>Race details</title>

    </head>
    <body>
        <a href="{{ url_for('index') }}">Back to index</a>

        {% if not race %}
            <p>Could not find race details</p>
        {% else %}
            <table>
                <thead>
                    <tr>
                        <th>Runner name</th>
                        <th>Lap time</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lap in race.laps %}
                        <tr>
                            <td>{{ lap.runner_name }}</td>
                            <td>{{ lap.lap_time }}</td>
                        </tr>
                    {% endfor%}
                </tbody>
            </table>
        {% endif %}
    </body>
</html>