On click HTML loader reappear and disappear

See more:

Javascript

CSS

HTML

jQuery

I have this code below that consists of a HTML tab populated with some DOM elements that is dynamically created. I currently have a animation loader inside my tab which disappears after the content inside the tab is fully loaded.

I have a button that repopulate's my tab and what i'm trying to accomplish is when i click the button the content in the tab will be cleared and the loader will reappear, and once the tab is repopulated with the new data the loader will disappear.

Is there an easy way to accomplish this the method i'm currently trying below doesn't seems to work. I have added some comments of what i tried in the codes any help would be greatly appreciated thank you.

What I have tried:

Here is my Fiddle[^]