动态创建div并分配django表单集元素

Question

我的情况是，我有一个产品的不同项目，并且有一种类型的不同产品。在类型页面上，我需要显示该产品的每个产品和相应的项目。我想使用bootstrap可折叠组件，因此当用户单击产品标题时，该产品的div可以显示为Items的可折叠选项。当用户点击项目时，将显示项目信息。我从django视图中获取了formset中的数据，但我不知道如何在动态div中显示它们。

这是我的.html文件，用于显示我希望如何显示项目。

<div class="panel panel-default"> <!-- Display Type -->
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#entities"> Products </a>
            </h4>
        </div>
        <div id="entities" class="panel-collapse collapse">
            <div class="panel panel-default"> <!-- Display Items -->
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#item1"> Items </a>
                    </h4>
                </div>
                <div id="item1" class="panel-collapse collapse">
                    <h4> Item 1 </h4>
                </div>
            </div>
        </div>
</div>