bootstrap 3 Datetimepicker in a list

Question

I finally got eonasdan bootstrap 3 datetimepicker to work on a form view of MVC 5. However, I am having trouble to get it to work on list view. Below is the codes I got. On the list view, clicking on the calendar field doesn't bring up the calendar. What am I missing? Any help?

Form View:

<div class="input-group date">
     @Html.TextBoxFor(m => m.ActivateDate, new { @class = "form-group" })
</div>
<script type="text/javascript">
     $(function () {
           $('#ActivateDate').datetimepicker();
     });
</script>

List View:

@for (int i = 0; i < Model.Count; i++)
{
    <tr class="orderedrow">
        <td>@Html.ActionLink(Model[i].ServiceName, "Edit", new { Model[i].ServiceID })</td>
        <td>
            <div class="input-group date">
                @Html.TextBoxFor(model => model[i].ActivateDate, new { @class = "form-group" })
            </div>
            <script type="text/javascript">
                  $(function () {
                       $('#[@i].ActivateDate').datetimepicker();
                  });
            </script>
        </td>
    <tr>
}

Below is the html generated by the for loop above

<td>
    <div class="input-group date">
         <input class="form-group" data-val="true" data-val-date="The field Activate Date must be a date." data-val-required="The Activate Date field is required." name="[12].ActivateDate" type="text" value="2/25/2015 12:00:00 AM" />
    </div>
    <script type="text/javascript">
        $(function () {
            $('#[12].ActivateDate').datetimepicker();
        });
    </script>
</td>

Per Sam's suggestion I changed the above code to this. But it still doesn't popup the calendar as I click on the Activate Date textbox.

<script type="text/javascript">
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker();
    });
</script>

@for (int i = 0; i < Model.Count; i++)
{
    <tr class="orderedrow">
        <td>@Html.ActionLink(Model[i].ServiceName, "Edit", new { Model[i].ServiceID })</td>
        <td>
            <div class="datetimepicker date">
                @Html.TextBoxFor(model => model[i].ActivateDate, new { @class = "form-group" })
            </div>
        </td>
    <tr>
}

Generated Html

<tr>
<td><a href="/someurl/admin?ServiceID=26">Cognos 10</a></td>
<td>
    <div class="datetimepicker date">
        <input class="form-group" data-val="true" data-val-date="The field Activate Date must be a date." data-val-required="The Activate Date field is required." name="[34].ActivateDate" type="text" value="2/25/2015 12:00:00 AM" />
    </div>
</td>
</tr>

Answer 1

Square brackets are invalid characters for an id: What are valid values for the id attribute in HTML?

You could try escaping the square brackets in your datetimepicker selector.

Another way you could work around this issue is by assigning the same class to each datetimepicker (say class="datetimepicker"), then calling $(".datetimepicker").datetimepicker();, then you only need to make one call to initialize every picker.