title: javascript: How to get each record id on data-id from foreach?
body: <p>I have a category list table which gets records from foreach. Every row has delete button and this button has data-id gets id from the row. I also have a function which gets data-id. But there is a problem, I always get first record id.</p>
  
  <p><a href="https://i.stack.imgur.com/aGMZY.jpg" rel="nofollow noreferrer">like this</a></p>
  
  <p><a href="https://i.stack.imgur.com/NljOl.jpg" rel="nofollow noreferrer">Source</a></p>
  
  <pre><code>Global.js: 
  
      function DeleteCategory() {
                  var Id = $("#Cid").attr("data-id");
                  alert(Id); 
              }
  </code></pre>
  
  <p>Index.cshtml:</p>
  
  <pre><code>  &lt;tbody&gt;
                                  @foreach (var item in Model)
                                  {
                                      &lt;tr&gt;
                                          &lt;td&gt;&lt;span class="label label-success"&gt;@item.Id&lt;/span&gt;&lt;/td&gt;
                                          &lt;td&gt;@item.CategoryName&lt;/td&gt;
                                          &lt;td&gt;
                                              @if (item.IsActive)
                                              {
                                                  &lt;b  class="label label-success"&gt;Active&lt;/b&gt;
                                              }
                                              else
                                              {
                                                      &lt;b  class="label label-danger"&gt;Passive&lt;/b&gt;
                                              }
                                          &lt;/td&gt;
                                          &lt;td&gt;Server updates and maintenance&lt;/td&gt;
                                          &lt;td&gt;&lt;a href="#"&gt;Admin&lt;/a&gt;&lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;button class="btn btn-default btn-sm" id="editId" onclick="" data-id=""&gt;Edit&lt;/button&gt;
                                              @*@Html.ActionLink("Delete","Delete", new {id=item.Id },new { onclick = "return confirm('Do you want to delete this row?')"})*@
                                              &lt;button class="btn btn-default btn-sm" id="Cid" onclick="DeleteCategory()" data-id="@item.Id"&gt;Delete&lt;/button&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
  
                                  }
  </code></pre>