jQuery Show current div on input focus -

i have 2 inputs on form , want show respective panel when input on focus.

i using bootstrap form divided in 2 columns: left column input , right column panel needs shown when input on focus.

previously firing panels on page when 1 input selected tried use $(this).parent().next().('.js-panel-tip').show(); didn't work.

how can target respective panel of selected input?

jsfiddle

js:

$('.js-show-panel-tip').focus(function() {     $(this).parent().next().('.js-panel-tip').show();      $(document).bind('focusin.js-panel-tip click.js-panel-tip',function(e) {         if ($(e.target).closest('.js-panel-tip, .js-show-panel-tip').length) return;         $(document).unbind('.js-panel-tip');         $('.js-panel-tip').fadeout('medium');     }); }); $('.js-panel-tip').hide(); 

html:

<div class="container">    <form>   <div class="row">     <div class="col-md-6">       <div class="form-group">         <label for="exampleinputemail1">email address</label>         <input type="email" class="form-control js-show-panel-tip" placeholder="email">       </div>     </div>      <div class="col-md-6">       <div class="panel panel-default bg-gray js-panel-tip">         <div class="panel-body">           <u>email address</u>           lorem ipsum dolor sit amet, consectetur adipisicing elit. sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! eligendi dolorum neque fuga non eaque reiciendis facere praesentium.         </div>       </div>     </div>   </div><!-- row -->     <div class="row">     <div class="col-md-6">       <div class="form-group">         <label for="exampleinputpassword1">password</label>     <input type="password" class="form-control" id="exampleinputpassword1" placeholder="password">       </div>     </div>      <div class="col-md-6">       <div class="panel panel-default bg-gray js-panel-tip">         <div class="panel-body">           <u>password</u>           lorem ipsum dolor sit amet, consectetur adipisicing elit. sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! eligendi dolorum neque fuga non eaque reiciendis facere praesentium.         </div>       </div>     </div>   </div><!-- row -->   </form> </div> 

try $(this).parent().parent().next().find('.js-panel-tip').show();

jsfiddle