根据用户选择动态添加输入字段

我在ASP.NET模型中有一个FieldItems字典，此字典的值如下。

年龄-复选框，名称-文字，公司-文字

在我的视图文件中，我基于字典中可用的键，值对创建控件。

<div class="@Model.CssClass sf-fieldWrp">
<table>
    <tr>
        <td>
            <table>
                @foreach (var item in Model.FieldItems)
                {
                    <tr>
                        @if (item.Value == "checkbox")
                        {
                            <td>@item.Key</td>
                            <td> <input id="associationCheckbox" type="@item.Value" name="@item.Key" placeholder="@item.Key" value="false"/></td> 
                        }
                        else
                        { 
                            <td>@item.Key</td>
                            <td> <input type="@item.Value" name="@item.Key" value="@Model.Value" placeholder="@item.Key" /> </td>
                        }
                    </tr>
                }
            </table>
        </td>

        <td>
            <span>
                <button type="button" class="btn btn-success" style="float:none;cursor:pointer" ng-click="RemoveWidget()">AddPerson</button>
            </span>
        </td>
    </tr>

</table>
<span>
    <button type="button" class="btn btn-danger" style="float:none;cursor:pointer" ng-click="AddWidget()">Remove</button>
</span>

</div>

现在，我的要求是根据按钮的点击包含/删除所选字段。粗略的设计如下所示。您能否为此实施提供一些建议？

请按此顺序检查图像。1.初始2. AfterAdd 3. AfterRemove

初始

后添加

移除后

图片链接：

谢谢Bal