title: jquery Datepicker not working for html table rows except first row
body: <p>I have this html code in my .net MVC cshtml page. Datepicker class is used in input type for EventDate. Datepicker calendar is opening fine on each row when clicked on input textbox. The issue is, only first row textbox is getting filled with selected Date on calendar,  <strong>the other rows are not filling up with selected date.</strong></p>
  
  <pre><code>$(function () {
      $(".Datepicker").datepicker({
          changeMonth: true,
          changeYear: true, 
          showAnim: "slideDown"
      });
  });
  
      @foreach (DataRow row in Model.Tables["dataa"].Rows)
                       {
                          &lt;tr&gt; 
                              &lt;td&gt;
                                  &lt;div class="editDelInput EventDateText"&gt;
                                      @row["EventDate"]  
                                  &lt;/div&gt;
                                  &lt;div class="saveCanInput EventDateInput" style="display:none"&gt;
                                      &lt;input type="date" class="Datepicker form-control form-control-sm" id="NONUHCEventDate" name="NONUHCEventDate"&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
      &lt;/tr&gt;
                       }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/k4d3z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k4d3z.png" alt="enter image description here"></a></p>