title: jQuery - Focus/Blur to Show/Hide input groups
body: <p>I have a little form with 2 groups of 3 inputs.</p>
  
  <p>Only one input is visible for each group.</p>
  
  <p><img src="https://i.stack.imgur.com/63fjk.png" alt="no input focused"></p>
  
  <p>If I focus an input, all in the same group are shown.</p>
  
  <p><img src="https://i.stack.imgur.com/KvHLj.png" alt="Group1 input focused"></p>
  
  <p>If no input of the group is focused, only the first one should appear.</p>
  
  <p><img src="https://i.stack.imgur.com/la8bj.png" alt="Group2 input focused"></p>
  
  <pre class="lang-js prettyprint-override"><code>$('input').focus(function () {
      $(this).closest('div').addClass('focused');
  }).blur(function () {
      $(this).closest('div').removeClass('focused');
  })
  </code></pre>
  
  <p>This works in Chrome but not in Firefox (please check <a href="http://jsfiddle.net/b439u/" rel="nofollow noreferrer">my fiddle</a>).<br>
  Both right hand side inputs are hidden before getting the focus.<br>
  Seems like events bubbling order is different on both browsers.</p>
  
  <p>Can someone help me to make this work for all browsers ?</p>