Adding tab functionality

[big-javascript-fan]

I tried to make adding tab functionality from HTML template but after inserting tab, I added tab content to tab content list. But after changed tab-content-list I can not edit any tab-content anymore.
I added tab content using javascript dynamically to tab-content-list.
Such like this.
`function getCustomTab() {
return [{
id: 'tab',
label: '',
attributes: {
class: 'custom-icon flowz-visitor-tab-style-2',
title: '',
},
category: 'Tabs',
content:

           <li>
              <div class="square-tab-box" data-id="tab">
                 <div class="icon motel"></div>
                 <span class="d-none d-sm-block">Tab</span>
              </div>
           </li>

            ,
        
}]

}
This is what I have done for adding tab content to tab-content list.function changeTabId() {
$('.square-tab-list').each(function () {
var amount = $(this).find('.square-tab-box').length;
$(this).find('.square-tab-box').each(function () {
if ($(this).data('id') == 'tab') {
$(this).attr('data-id', 'tab' + amount);
// $(this).parent().parent().css({'display': 'inline'});
$('.square-tab-content-list').slick('unslick');
$('.square-tab').append('

Things to do

• 
  
  
  
  
  
  
  
  

  
  
  0.7Km
  

  
  

  City Hotel Duqm

  
  

  City Hotel Duqm is located between Salalah and Muscat.

  
  

  Find Out More

  
  
  
  


• 
  
  
  
  
  
  
  
  

  
  
  3Km
  

  
  

  Park Inn by Radisson

  
  

  We welcome our guests in a safe and secure hotel environment

  
  

  Find Out More

  
  
  
  


• 
  
  
  
  
  
  
  
  

  
  
  1.2Km
  

  
  

  Crowne plaza Duqm

  
  

  Get the celebrity treatment with world-class service at Crowne Plaza Duqm

  
  

  Find Out More

  
  
  
  

'
);
return false;
}
});
});
}
`

Can I make a any effective way?
Thanks

javascriptFan

[artf]

Please create a live demo of the issue and format your code correctly