Html 如何显示用户定义的表单字段数？

我使用HTML和Jinja2创建了一个表单来配置CSV文件。要求用户更改名称并为每个列名指定类型。CSV文件可以有任意数量的列，因此，我已经通过循环创建了表单。目前，我使用引导网格，并根据列数将其分为三列和三行

<form action="/updateFile" method="POST" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-12">
            <p class="form-group">
                {% for x in title %}
                    {% if loop.index == 1 %} <div class="row"> {% endif %}
                    <div class="col-xs-12 col-sm-12 col-lg-4 col-md-4">
                        <div class="row">
                            <div class="col-sm-6">
                                <label> Field {{ loop.index }} : {{ x }} </label>
                                <input type="text"  title="Name should only contain letters or numbers" class="form-control"
                                name="field-{{ loop.index }}" value="{{ x }}" maxlength="10" pattern="[a-zA-Z0-9_ ]+" required>
                            </div>
                            <div class="col-sm-6 pull-right">
                                <label>&nbsp;</label>
                                <select class="form-control " name="choice-{{ loop.index }}">
                                    <option value="mcqsr">MCQ-Single Response</option>
                                    <option value="mcqmr">MCQ-Multiple Response</option>
                                    <option value="num">Numerical</option>
                                    <option value="tim">Temporal</option>
                                    <option value="lat">Survey Site - Latitude</option>
                                    <option value="lng">Survey Site - Longitude</option>
                                    <option value="temp">Survey Site - Temporal</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <label>&nbsp;</label>
                                <input type="text"  title="Name should only contain letters or numbers" class="form-control"
                                name="question-{{ loop.index }}" value=" Question of {{ x }}" pattern="[a-zA-Z0-9_ ]+" required>
                            </div>
                        </div>
                    </div>
                    {% if loop.index % 3 == 0 %} </div><p>&nbsp;</p><p>&nbsp;</p><div class="row"> {% endif %}
                    <input type="hidden" name="title-{{ loop.index }}" value= {{x}}>
                {% endfor %}
            </div>
        </div>
    <div class="row">
        <div class="col-sm-12 text-center">
            <input type="hidden" name="filename" value= {{filename}}>
            <input type="hidden" name="numofField" value= {{numofField}}>
            <button class="btn btn-primary" type="submit" value="Update">Submit</button>
        </div>
    </div>
    </div>
</form>

{title%中x的%s}
{%if loop.index==1%}{%endif%}
字段{loop.index}：{{x}
MCQ单响应
MCQ多重响应
数字的
世俗的
调查地点-纬度
调查地点-经度
调查地点-临时
{%if loop.index%3==0%}{%endif%}
{%endfor%}
提交

---

我想包括一个选项，用户可以选择他/她想要选择的变量数量。与电子商务网站或相册类似，它们通常为您提供一次“显示25”的选项，并为您提供将其更改为“显示50”、“显示100”或“显示全部”的选项，以便用户能够控制页面中的混乱程度。我几乎找不到像datatables.js这样的例子，但它们只适用于表。我找不到一种方法来解决这个问题？

如果您访问javascript，您可以编写类似这样的逻辑

let container=document.getElementById（'container'）；
for（设i=0；i