javascript - Cannot get text from td (ASP.NET MVC ) -

i have table display via razor syntax

here code

@foreach (var item in model) {     <tr>         <td class="point">             @(rowno += 1)         </td>         <td class="title">             @html.displayfor(modelitem => item.date_of_birthday)         </td>         <td id="name" class="title">             @html.displayfor(modelitem => item.name)         </td>         <td class="title"></td>         <td class="title"></td>         <td class="title"></td>         <td style="text-align: end;">            <img id="delete_pt" src="~/images/icons8-delete-50.png"/>             <img src="~/images/doc-50.png"/>         </td>     </tr> } 

i try value of

<td id="name" class="title">     @html.displayfor(modelitem => item.name) </td> 

via js

here code

<script> $(document).on('click', '#delete_pt', function () {     var title = $(this).find('#name').html();     console.log(title); }); 

but when click i'm not value it's empty. error?

your element id="delete_pt" <img> , not contain child elements. need find parent <tr> element , find <td id="name"> element.

$(document).on('click', '#delete_pt', function () {     var title = $(this).closest('tr').find('#name').html();     console.log(title); }); 

however loop generating duplicate id attributes invalid html. need replace id attributes class names, example

<td class="name title">     @html.displayfor(modelitem => item.name) </td> .... <img class="delete_pt"  src="~/images/icons8-delete-50.png" /> 

and use

$(document).on('click', '.delete_pt', function () {     var title = $(this).closest('tr').find('.name').html();     console.log(title); });