Динамический javascript с бритвенными страницами

Я пытаюсь создать модель с динамическими полями ... по сути, на моей странице есть несколько кнопок, которые добавляют текстовые поля.

У меня есть переменная - "счетчик"

@{
    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 ++} прямо над строкой, которая добавляет динамическое текстовое поле, будет работать. Но переменная счетчика увеличивается только один раз, независимо от того, сколько раз я нажимаю кнопку. Как увеличивать счетчик при каждом нажатии кнопки?