Get child element using jquery-CodePudding

I want to get input with class end when the value of class start is changed.

Also I can have more than 1 end and start class

<tr >
   <td>1. Start -</td>
   <td>
   <input type="text" name="start[]"  style="width: 60px"> // when the value is changed 
</td>
   <td>End -</td>
   <td>
   <input type="text" name="end[]"  style="width: 60px"> // get this input
</td>
   <td>Rate</td>
   <td><input type="text" name="rate[]"  style="width: 90px"></td>
</tr>

<tr >
   <td>2. Start -</td>
   <td>
   <input type="text" name="start[]"  style="width: 60px"> 
</td>
   <td>End -</td>
   <td>
   <input type="text" name="end[]"  style="width: 60px">
</td>
   <td>Rate</td>
   <td><input type="text" name="rate[]"  style="width: 90px"></td>
</tr>

So far, I've tried something like code bellow:

$(".start").on("change", function() {
  let element = $(this).parent().parent().find('td').children('end').html();
  console.log(element);
}

But still not working, it return undefined into console. And if write my code like this (up to tr parent):

console.log($(this).parent().parent().html());

The result is like this (I got all of the td):

<td>1. Start -</td>
<td><input type="text" name="start[]"  style="width: 60px"></td>
<t>End -</td>
<td><input type="text" name="end[]"  style="width: 60px"></td>
<td>Rate</td>
<td><input type="text" name="rate[]"  style="width: 90px"></td>

CodePudding user response：

you will have to use .closest()

$(".start").on("change", function() {
  let element = $(this).closest('tr').find('.end').html();
  console.log(element);
}

CodePudding user response：

Or you can use parents like:

$(".start").on("change", function() {
  let element = $(this).parents("tr").find(".end");
  console.log(element)
});