title: How to limit JS animation to the input field you clicked into, not all of them?
body: <p>Messing with the jawbreaker-esque input animation found in this <a href="https://codepen.io/wedranb/pen/Lsfry" rel="nofollow noreferrer">code pen</a></p>
  <p>The code pen only has ONE field, but if you add a second, like this...</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;p class=&quot;lb&quot;&gt;username&lt;/p&gt;
    &lt;p class=&quot;placeholder&quot;&gt;username&lt;/p&gt;
    &lt;input type=&quot;text&quot; /&gt;
    &lt;div class=&quot;border&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container2&quot;&gt;
    &lt;p class=&quot;lb&quot;&gt;username2&lt;/p&gt;
    &lt;p class=&quot;placeholder&quot;&gt;username2&lt;/p&gt;
    &lt;input type=&quot;text&quot; /&gt;
    &lt;div class=&quot;border&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And then add this CSS so the 2nd field moves down below the 1st...</p>
  <pre><code>.container2 {
    position: absolute;
    top: 75%;
    left: 50%;
    
    width: 250px;
    height: 50px;
    
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  </code></pre>
  <p>You'll see that when you click into either input field, the desired animation happens to both.</p>
  <p>So how could I change the JS so that it only happens to the input field you click into?</p>