Jquery Lazy Load Tabs from just DataAttributes

Scenario

The content of my tab comes from another url address and I need to process a lazy bootstrap tab! Once the tab content has been visited, the url should no longer be loaded.

Proposal

I created some data attributes to handle getting another page on demand. After that, I set the tab as loaded, passing the tab to the static tab!

The three attributes

 /*
  Attributes: 
        data-lazy-url: string (required) to get
        data-lazy-loaded: boolean (optional) default false, once true, the tab never load anymore
        data-lazy-target: string (required) selector to element 
*/

The Html

<a class="nav-link"
     data-lazy-url="https://dev.to/raafacachoeira" 
     data-lazy-target="#MyTab" 
     data-toggle="tab" 
     href="#MyTab" 
     role="tab" 
     aria-controls="MyTab" 
     aria-selected="false">
      My blog posts
    </a>

And for the Tab Content

<div class="tab-pane" id="MyTab" role="tabpanel">
</div>

Code: https://codepen.io/raafacachoeira/pen/mdMXwWW