JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="list-item" data-id="1">
        <td>
        <input value="Some text entered by the user" type="text" />
        </td>
    </tr>
</table>

JavaScript

var listItemId1 = $('input').closest('tr').attr('data-id');
    var listItemId2 = $($('input')[0].parentNode.parentNode).attr('data-id');
    var input = document.getElementsByTagName('input');
    var listItemId3 = document
          .getElementsByTagName('input')[0]
          .parentNode
          .parentNode
          .attributes['data-id'].value;
    
console.log('1: ', listItemId1);
console.log('2: ', listItemId2);
console.log('3: ', listItemId3);

$('input').each( function () {
    console.log('4: ', $(this).closest('tr').attr('data-id') );
    console.log('5: ', this.parentNode.parentNode.attributes['data-id'].value );
});