带有剃须刀页面的动态javascript

Question

我正在尝试创建一个具有动态字段的模型...本质上，我的页面上有一些添加文本框的按钮。

我有一个变量-“计数器”

@{
    ViewBag.Title = "Create";
    var counter = 0;

}

每次单击添加字段的按钮时，我都希望增加它。.

<div class="form-group">


            <button class="control-label col-md-2" id="btnAddFieldTwo">Add Question with Multiple Answers</button>

            <div class="col-md-10">

                @using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()

                    <div id="fields2"></div>

                }


                <div style="color:blue"><b>Data:</b> @ViewBag.Data</div>
                <!-- JS includes -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

                <script type="text/javascript">

                $(document).ready(function () {
                    var $fields = $('#fields2');

                    $('#btnAddFieldTwo').click(function (e) {
                        e.preventDefault();
                        @{ counter++ }
                        $(' <input type="text" class="form-control" name="dynamicFieldTwo">Enter the question</input><br/>@Html.TextBox("Question",@counter, new { style="color:red" }) ').appendTo($fields);
                    });
                });

                </script>
            </div>
        </div>

我想在添加动态文本字段的行上方添加@ {counter ++}即可。但是，无论我单击按钮多少次，计数器变量只会增加一次。每次单击按钮时如何增加计数器？