get the first input type hidden

Question

i have this table

        <tbody>
            @foreach($users as $user)
                <tr>
                    <input type='hidden' value='{{$user->username}}' />
                    <td><div contenteditable="true" class='contenteditable'>{{$user->username}}</div><div class='result'></div></td>
                    <td><div contenteditable="true" class='contenteditable'>{{$user->email}}</div><div class='result'></div></td>
                    <td>
                        <select class='form-control'>
                        @foreach($permissions as $permission)
                            @if($permission->id == $user->permission)
                                <option style='color:red' selected='true'>{{$permission->permission_name}}</option>
                            @else
                                <option>{{$permission->permission_name}}</option>
                            @endif
                        @endforeach
                        </select>
                    </td>
                    <td><div contenteditable="true" class='contenteditable'>{{$user->phone}}</div><div class='result'></div></td>
                    <td>
                        <select class='form-control'>
                        @foreach($divisions as $division)
                            @if($division->id == $user->division)
                                <option style='color:red' selected='true'>{{$division->division_name}}</option>
                            @else
                                <option>{{$division->division_name}}</option>
                            @endif
                        @endforeach
                        </select>
                        <div class='result'></div>
                    </td>
                    <td>
                        <button class='btn btn-success'>عرض</button>
                        <button class='btn btn-info'>تعديل</button>
                        <button class='btn btn-danger'>حذف</button>
                    </td>
                </tr>
            @endforeach
        </tbody>

and i have this js function to get the input type hidden value like this

$(".contenteditable").keyup(function(){
   var result = document.activeElement;
   var result = result.parentNode.firstChild;
   console.log(result);
 })

what i need is javascript or jquery code when i keyup the contenteditable div i get the first value

<input type='hidden' value='{{$user->username}}' />

Answer 1

You should traverse upto tr element using .closest() then use .find() along with :first selector to target :hidden element

$(".contenteditable").keyup(function(){
   var result = $(this).closest('tr').find('[type="hidden"]:first').val();
   console.log(result);
});

Note: tr can only have td or th as child elements. So <input> should be child of either of them