Закройте всплывающее окно с динамическим идентификатором, нажав в любом месте, используя Javascript

Question

Вот мой HTML:

<div ng-attr-id="btnfilter{{user.name}}">
  <span class="spanbutton" style="" id="navbtn" q={{user.name}} onclick="openNav(this)">
    <i class="fa fa-ellipsis-h" style="font-size: 25px;margin-top: 23px;margin-left: -23px;"></i>
  </span>
</div>

Вот мой код Javascript для закрытия каждого отдельного всплывающего окна:

function openNav(x) {
  var q = $(x).attr('q');

  if ($('#mysidenav' + q).css('display') == 'none') {
    $('#mysidenav' + q).fadeIn('slow');
    $('#btnfilter' + q).html('<span class="spanbutton" id="navbtn" q=' + q + ' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px;color:red;margin-top: 23px;margin-left: -23px;"></i></span>');
  } 
  else {
    $('#mysidenav' + q).fadeOut('slow');

    setTimeout(function () {
      $('#mysidenav' + q).css("display", "none");
    }, 1000);

    $('#btnfilter' + q).html('<span class="spanbutton" id="navbtn" q=' + q + ' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i></span>');
  }
}

Я также использую AngularJS. У меня есть несколько динамически генерируемых пользовательских карт. У каждого из них есть кнопка, которая при нажатии открывает небольшое всплывающее окно, а когда я нажимаю кнопку во второй раз, она закрывает всплывающее окно. Я не могу понять, как закрыть всплывающее окно, когда я щелкаю в любом месте тела, чтобы при закрытии любого всплывающего окна html закрытой кнопки все еще следовал этой html-структуре:

<span class="spanbutton" id="navbtn" q='+q+' style="" onclick="openNav(this)">
  <i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i>
</span>

Как получить атрибут q и идентификатор btnfilter родительских элементов, чтобы создать html для закрытого всплывающего окна, как указано в коде выше, если мне нужно закрыть несколько открытых всплывающих окон, щелкнув в любом месте

То, что я до сих пор пытался получить идентификатор :

    $(document).on('click',function(e) {
  if (!$(e.target).hasClass('fa-ellipsis-h')) {

  $('.spanbutton').each(function(i, obj) {
    var id = $( this ).closest("div").prop("id");
    var q = id.replace('btnfilter','');
    if ( $('#mysidenav'+q).css('display') != 'none' ) {
    $('#mysidenav'+q).fadeOut('slow');
  setTimeout( function(){
    $('#mysidenav'+q).css("display", "none");
    },1000);
    $('#btnfilter'+q).html('<span class="spanbutton" id="navbtn" q='+q+' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i></span>');
}
}); 
}
});

Этот код прекрасно закрывает все открытые всплывающие окна, когда я щелкаю в любом месте тела, кроме кнопки, класс которой fa-ellipsis-h. Так что это держит всплывающее окно открытым, пока я не нажму где-нибудь еще в теле. Теперь это прекрасно работает. Теперь единственная оставшаяся проблема - если одно всплывающее окно открыто, оно не закрывается, когда я открываю другое всплывающее окно. Любое предложение о том, как закрыть другие всплывающие окна при открытии нового всплывающего окна?

Вот рабочая скрипка текущего прогресса https://jsfiddle.net/81upqvb6/2/