datepicker not working in webgrid mvc4 for rows

See more:

jQuery

Hi,

Datepicker selection is not working other than first row. please find the below code.

<script type="text/javascript" language="javascript">
        $(function () {
           var date = new Date();
           var currentMonth = date.getMonth();
           var currentDate = date.getDate();
           var currentYear = date.getFullYear();

           $(".datepicker").datepicker({
               showOn: "button",
               buttonImage: "/calendar.jpg",
               buttonImageOnly: true,
               buttonText: "Select date",
               minDate: new Date(currentYear, currentMonth, currentDate)
           });
       });

       $(function () {
           $('.edit-mode').hide();
           $('.edit-user, .cancel-user').on('click', function () {

               var tr = $(this).parents('tr:first');
               tr.find('.edit-mode, .display-mode').toggle();
           });

           $('.save-user').on('click', function () {
               var tr = $(this).parents('tr:first');
               var cmpId = tr.find("#EditCompId").val();
               var endDate = tr.find("#EditEndDate").val();

               tr.find("#lblEndDate").text(endDate);
               tr.find('.edit-mode, .display-mode').toggle();
               var url = '@Url.Action("UpdateComplementaryDetails", "Complimentary")';
            url = url + "?complementaryId=" + cmpId + "&endDate=" + endDate;

            window.location.href = url;

        });
    })

</script>

<tr style="width: 100%;">
               <td style="width: 100%;">
                   @{ WebGrid grid = new WebGrid(Model, canPage: true, rowsPerPage: 20); }
                   @if (Model != null)
                   {   @grid.GetHtml(tableStyle: "booking_table",
                    headerStyle: "",
                    alternatingRowStyle: "booking_row",
                    selectedRowStyle: "booking_row",
                    htmlAttributes: new { id = "Benefit Details", style = "Width:100%" },
                    rowStyle: "booking_row", columns: grid.Columns(
                    grid.Column("Action", format: @<text>
                       <img class="edit-user display-mode" alt='Edit' src='@Url.Content("~/Content/Images/Main/edit.jpg")' />
                       <button class="save-user edit-mode">Save</button>
                       <button class="cancel-user edit-mode">Cancel</button>
                       <button class="save-user edit-mode" type="button">
                           Save</button>
                       <button class="cancel-user edit-mode" type="button">
                           Cancel</button>
                       <input id="hdnComplementaryId" type="hidden" value="@item.iComplementaryId" />
                       </text>, style: "col3Width", canSort: false),
                               grid.Column("Name", "Name", format: (item) => item.Name, style: null, canSort: false),
                               grid.Column("Email", "Email", format: (item) => item.Email, style: null, canSort: false),
                               grid.Column("CardName", "Card Name", format: (item) => item.CardName, style: null, canSort: false),
                               grid.Column("StartDate", "Start Date", format: (item) => string.Format("{0:dd-MMM-yyyy}", item.StartDate), style: null, canSort: false),
                               grid.Column("EndDate", "End Date", format: @<text>
                       <span class="display-mode">
                           <label id="lblEndDate">@string.Format("{0:dd-MMM-yyyy}", item.EndDate)</label>
                       </span>
                       <span class="edit-mode">
                           <input  id="EditEndDate" type='text' class='datepicker'  value="@string.Format("{0:dd-MMM-yyyy}", item.EndDate)" />
                           <input id="EditCompId" type="hidden"  value="@item.iComplementaryId"  />
                       </span>
                       </text>, style: "col2Width"),
    grid.Column("Status", "Status", format: (item) => item.Status, style: null, canSort: false)))
                   }
               </td>
           </tr>

Thanks,
Sriram