How to make .insert-after run only once?

Question

I'm pretty new to coding and don't really know what I'm doing, so any help would be appreciated. I'm trying to make it so this lightbox fills up the entire screen when clicked on, but the code I currently have (borrowed from https://usefulangle.com/post/38/animating-lightbox-with-css-javascript) adds an extra empty container every time I click anywhere in it, which messes up the entire layout. I think its because of this code

$('<div id="empty-container"></div>').insertAfter("#container-1");

How can I set it up so that this only happens once when the element is clicked? Thanks

Answer 1

If you want to trigger event only once, You can use .one()

$('your_selector').one('click', function(e){
  $('<div id="empty-container"></div>').insertAfter("#container-1");
});