jquery - ユーザーが特定の div に集中している場合、フォーカスアウトしたくありません

Question

focusin() 関数を使用して、フォーカスされている入力ボックスの下に div を動的に追加しています。ユーザーが focusout すると、動的に追加された div が削除されますが、問題は、ユーザーがその div にフォーカスした場合に、その div 自体が削除されないようにしたいことです。

私のコード:

$('.ok').focusin(function() {
  $('.ok').after('<div class="thisdiv" tabindex="1">Okay Okay Okay</div>');
});

$('.ok').focusout(function() {
  if (!$('.thisdiv').is(':focus')) {
    $('.thisdiv').remove();
  }
});

.thisdiv {
  background: red;
  border: 2px dashed;
  width: 400px;
  padding: 50px;
}
.thisdiv:hover,
.thisdiv:active,
.thisdiv:focus {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="ok">

JSFiddle: https://jsfiddle.net/hq5dy61j/4/