Bootstrap tabs not working?

Question

JavaScript

Hello! I ran into a problem while using bootstrap tabs.
The task is as follows, by clicking on the block we get its contents (the tabs themselves) and open the bootstrap modal, put the tabs in the modal. This is where the problem comes in. Tabs don't work correctly, only tabs switch, tab contents don't. I tried to solve this problem by re-launching tabs in an open js modal, but to no avail. How can this problem be solved? Please advise, thanks in advance

$(document).ready(function () {

    $('.catalog-item__img').on('click', function () {
        const $content = $(this).siblings('.catalog-item__more').html();
        $('.modal-body').html($content);
       
        $('.modal').on('shown.bs.modal', function () {
            
            $('.nav-tabs').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            });

        });
    });
});

<div class="catalog-item__img" data-toggle="modal" data-target="#productModal">
                        <img src="images/products/1-TouchBinBo.jpg" alt="" width="100%">
                    </div>

<div class="catalog-item__more d-none">
<div>
         <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                 <a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                  <a class="nav-item nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
          </div>
          <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
               <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
               <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
            </div>
  </div>
</div>

<div id="productModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="productModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <button type="button" class="position-absolute close d-flex justify-content-center align-items-center" data-dismiss="modal">
                    <svg class="svg-icon">
                        <use xlink:href="images/sprite.svg#close"></use>
                    </svg>
                </button>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>

https://jsfiddle.net/furcifer2121/b6gad5vk/

Answer 1