close bootstrap popover event is conflicting with jquery validation plugin

Question

Plugin functionality is conflicting with close popover click event. When I click on submit, error gets displayed on bootstrap popover and validation plugin places focus on that input field. Now when I try to close popover from close button on it, firstly it hides the popover and afterwards validation plugin again displays it because of input focus out event. Now I have to click twice on popover to close it, first click removes focus from input and second click closes it. It only happens when there is focus on error message's corresponding input field. So both are conflicting here.

$(document).on('click','.popover-close-button', function(){
    $(this).closest('div.popover').popover('hide');
});

JsFiddle -> http://jsfiddle.net/dwdh8xqz/

Click on login button, validation message can be seen and then try to close popover.

Answer 1

here is the reference: http://jsfiddle.net/dwdh8xqz/2/

replaced

$(this).closest('div.popover').popover('hide'); 

with

$('input[name="'+$(this).data('elem')+'"]').next().popover('hide');

Still no idea what was wrong with previous jsfiddle. But this one is working fine.