How to limit JS animation to the input field you clicked into, not all of them?

Question

Messing with the jawbreaker-esque input animation found in this code pen

The code pen only has ONE field, but if you add a second, like this...

<div class="container">
  <p class="lb">username</p>
  <p class="placeholder">username</p>
  <input type="text" />
  <div class="border"></div>
</div>
<div class="container2">
  <p class="lb">username2</p>
  <p class="placeholder">username2</p>
  <input type="text" />
  <div class="border"></div>
</div>

And then add this CSS so the 2nd field moves down below the 1st...

.container2 {
  position: absolute;
  top: 75%;
  left: 50%;
  
  width: 250px;
  height: 50px;
  
  transform: translate(-50%, -50%);
  overflow: hidden;
}

You'll see that when you click into either input field, the desired animation happens to both.

So how could I change the JS so that it only happens to the input field you click into?

Answer 1

You can use $.parent() to get the parent, then target .placeholder, .border and .lb relative to the parent of the input that was clicked.

 $('input[type=text]').blur(function(){
   $parent = $(this).parent();
   $parent.find('.placeholder').removeClass("placeholder--animate");
   $parent.find('.border').removeClass("border--animate");
   $parent.find('.lb').removeClass("lb--animate");
   checkInput($(this));
 })
 .focus(function() {		
   $parent = $(this).parent();
   $parent.find('.placeholder').addClass("placeholder--animate");
   $parent.find('.border').addClass("border--animate");
   $parent.find('.lb').addClass("lb--animate");
   checkInput($(this));
 });

 function checkInput($input) {
   if ( $input.val()) {
       $input.prev('.placeholder').css('display', 'none');
    } else {
      $input.prev('.placeholder').css('display', 'visible');
    }
 }

  

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
  font-family: 'Open Sans', sans-serif;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 50px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

input[type=text] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background-color: transparent;
  color: #7f8c8d;
  font-weight: 600;
  outline: none;
  border: none;
  border-bottom: 1px solid #bdc3c7;
}

.placeholder {
  position: absolute;
  bottom: 5px;
  left: 0;
  margin: 0;
  font-size: 13px;
  color: #95a5a6;
  transition: .2s all ease-out;
}

.lb {
  position: absolute;
  top: 10px;
  left: -30px;
  z-index: 40;
  margin: 0;
  font-size: 10px;
  color: #3498db;
  opacity: 0;
  transition: .2s all ease-out;
}

.lb--animate {
  opacity: 1;
  left: 0;
}

.placeholder--animate {
  left: 20px;
  opacity: 0;
}

.border {
  position: absolute;
  bottom: 0px;
  display: inline-block;
  width: 0;
  height: 2px;
  padding: 0;
  margin: 0;
  background-color: #3498db;
  transition: .2s width ease-out;
}

.border--animate {
  width: 100%;
}

.container2 {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 250px;
  height: 50px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="lb">username</p>
  <p class="placeholder">username</p>
  <input type="text" />
  <div class="border"></div>
</div>
<div class="container2">
  <p class="lb">username2</p>
  <p class="placeholder">username2</p>
  <input type="text" />
  <div class="border"></div>
</div>