[SOLVED] How to target closest class

How to target closest class

I am working on the below code. Why am I not able to target the closets .inp2?

$('.inp-1').focusout(function() {
  $(this).closest(".inp-2").css({
    "background": "green",
    "border": "2px solid red"
  });
});

.inp-2 {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <input type="text" class="inp-1" id=""  placeholder="" /> Input 1
  <input type="text" class="inp-2" id=""  placeholder="" /> Input 2
</div>

<div class="row">
  <input type="text" class="inp-1" id=""  placeholder="" /> Input 1
  <input type="text" class="inp-2" id=""  placeholder="" /> Input 2
</div>

Solution

You should use .next() instead, because .closest() is looking up the DOM:

$('.inp-1').focusout(function() {
   $(this).next(".inp-2").css({
     "background": "green",
     "border": "2px solid red"
   });
 });

Check the below snippet

 $('.inp-1').focusout(function() {
   $(this).next(".inp-2").css({
     "background": "green",
     "border": "2px solid red"
   });
 });

.inp-2 {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <input type="text" class="inp-1" id="" placeholder="" />Input 1
  <input type="text" class="inp-2" id="" placeholder="" />Input 2
</div>

<div class="row">
  <input type="text" class="inp-1" id="" placeholder="" />Input 1
  <input type="text" class="inp-2" id="" placeholder="" />Input 2
</div>