Bootstrap 4 Tooltip Bug

HTML

<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
<script src="https://rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<button id="element" class="btn" data-toggle="popover" data-placement="right" data-content="Popover!">
Button
</button>
<br>
<button id="element2" class="btn" data-toggle="popover" data-placement="right" data-content="Popover!">
Button
</button>

JavaScript

var timeout;
var timeout2;
$('#element').click(function(e){
  let el = $('#element');
	el.popover('show');
	el.remove();
  clearTimeout(timeout);
  timeout = window.setTimeout(function(e){
    $('#element2').popover('hide');
  }, 2000);
});
$('#element2').click(function(e){
  let el = $('#element2');
  console.log(el);
	el.popover('show');
  clearTimeout(timeout2);
  timeout2 = window.setTimeout(function(e){
    $('#element2').popover('hide');
  }, 2000);
});