Fetched value is undefined jquery (traversal)

Actually am using Jqgrid but in browser console html look like this

<tbody>
<tr>
<td></td>
<td></td>
<td>
     <input type="text" id="priority_1per" value='10'>hello <input>
</td>
<td>
    <input type="text" id="priority_2per" value='20'>hellob <input>
</td>
</tr>
</tbody>

there is a column: "priority1" "priority2" which has textbox

 $('body').on('change', '#priority_1per', function () {
        //debugger;
        var priority1 = $(this).val();
        var priority2 = $(this).closest("tr").children("td").find("input[type=text]").find("#priority_2per")

        alert(priority1)
        alert(priority2)
        console.log(priority2)
    });

=>var priority1 am getting value (this).val() => but am not getting value of priority2 column data (i dono am doing crrt traversing or not)

jQuery.fn.init [prevObject: jQuery.fn.init(10)]
length: 0
prevObject: jQuery.fn.init(10) [input#productpriority.form-control.productpriority, input#divisionname.form-control._division.ui-autocomplete-input, input#categoryname.form-control.category.ui-autocomplete-input, input#subcategoryname.form-control.subcategory.ui-autocomplete-input, input#priority_1.form-control.plantname.plantCode1, input#priority_1per.form-control.priority_1per.number, input#priority_2.form-control.plantname.plantCode2, input#priority_2per.form-control.priority_2per.number, input#priority_3.form-control.plantname.plantCode3, input#priority_3per.form-control.priority_3per.number, prevObject: jQuery.fn.init(12)]
[[Prototype]]: Object(0)

this is the error am finding (not an error but mistake in travesal)

PLEASE help me out html look like

Solution

The problem is due to your find() logic. You use the first find() to get both the input type="text" elements, then the second is trying to find a child #priority_2per element inside the first input. This clearly cannot be found as it's not valid HTML.

To fix the problem remove the first find() and add val():

var priority2 = $(this).closest("tr").children("td").find("#priority_2per").val()

However as the elements have id attributes on them, and id have to be unique in the DOM, then the traversal logic is entirely redundant. You can just select by the id directly.

In addition, your HTML is invalid. <input /> elements have no closing tag. Here's a full working example:

$('body').on('change', '#priority_1per', function() {
  var priority1 = $(this).val();
  var priority2 = $("#priority_2per").val();

  console.log(priority1);
  console.log(priority2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>
        <input type="text" id="priority_1per" value="10" />hello
      </td>
      <td>
        <input type="text" id="priority_2per" value="20" />hellob
      </td>
    </tr>
  </tbody>
</table>