I have a table, whose rows and td's are created with a foreach. So there is no predicting how many rows there might be. Each row has two buttons accompanied by an two adjacent input fields. See image:Table Image When you click a button, I need to grab the value inside it's adjacent input which is wrapped in a td. I have tried everything: prev(), closest(), eg(). And I can not figure out how to isolate the specific input on click. The best I have achieved is applying some css to ALL the inputs, but not the specific partnered input.
HTML
<tbody>
@foreach($registeredChildren as $child)
<tr>
<td class="col-2"><a href="'/getchild/'+ {{$child->child_id}}">{{$child->childFirstName}}</a>    {{$child->childLastName}}</td>
<!--========TIME IN===========-->
<td class="col-3 pb-2 timeIn">
<input id="{{$child->child_id}}" class=" form-control " value="{{$child->timeIn}}" style="text-align:center;" type="text">
</td>
<td><button class="btn btn-outline-success timeInReset">Reset</button></td>
<!-- //========TIME Out ===========//-->
<td class="col-3 pb-2"><input style="text-align:center;" class="form-control " type="text" ></td>
<td><button id="timeOut/{{$child->child_id}}" class="btn btn-outline-success out">Reset</button></td>
</tr>
@endforeach
</tbody>
Script - This Does Not Work!
$(document).ready(function(){
$("button.timeInReset").click( function () {
$(this).closest("td.timeIn>input").css({"color": "red", "border": "2px solid red"});
});
closest doesn't look up sibling elements, but from current level up the DOM tree for parents.
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
$("button.timeInReset").click( function () {
$(this).closest("tr").find("td.timeIn>input").css({"color": "red", "border": "2px solid red"});
});