How to reset src value on modal close?

Question

opencart

Good afternoon, please help me to solve the problem. In the online store on ocstore 3.02.0, there are several products on the main page.
Each product opens in a quick view modal (on bootstrap 5).
Each window has a gallery of photos with thumbnails, when you click on a thumbnail, the main image changes to a thumbnail image.
As a result, if you close the modal window of the first product and move on to the next one, the main image is saved from the first window, and so on for all other products.
How to make it so that when the modal window is closed, the value is reset to the initial one?

Here is the code for the button to open the modal window:

<a href="#" data-bs-toggle="modal" data-bs-target="#pp-item-{{ product.product_id }}"><i class="fas fa-eye"></i></a>

Modal window code:

<div class="modal fade modal-view" id="pp-item-{{ product.product_id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><a href="{{ product.href }}">{{ product.name }}</a></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                
                <ul class="thumbnails list-unstyled clearfix">
                    
                    <li class="thumb-main text-center">
                        <a class="thumbnail"><img id="main" class="main" src="{{ product.thumb }}" alt="{{ product.name }}"></a>
                    </li>
                    {% if product.images %}
                
                    {% for image in product.images %}
                        <li class="thumb-additional">
                            <a class="thumbnail"><img class="min-img" src="{{ image.thumb }}" alt="{{ product.name }}"></a>
                        </li>
                    {% endfor %}
                    {% endif %}
                </ul>
            
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                <div class="product-price">
                    <span>{{ product.special }}</span>
                    <span class="old-price">{{ product.price }}</span>
                </div>
                <p>{{ product.description }}</p>
                
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                        
      </div>
    </div>
  </div>
</div>

And the script:

$(".min-img").on("click", function(){
   $(".main").attr("src", $(this).attr("src"));    
   });
    
    $('.modal-view').on('hidden.bs.modal', function () {
    // не могу додумать что тут написать
    });

Do not judge strictly, I will be grateful for any help.