bootstrap modal can't call function

Question

I was trying to load dynamic data on my bootstrap modal. But button can't call the javascript function so instead of loading dynamic data it only loads the on page modal. What could be possible error of the following code?

<a href="#"  style="color:#4fc6e1; margin-left:10px;" data-id="{{ $row->id }}" data-target="#cart-modal" data-toggle="modal"  > <i data-feather="plus-square"></i> </a>

Bootstrap Modal:

<div id="cart-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
                    <h4 class="modal-title">Warehouse Products</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          </div>
               
          <div class="modal-body cart p-4">
                         
          </div>
          <div class="modal-footer">
                
          </div>
              
      </div>
  </div>
</div><!-- /.modal -->

Javascript Part:

 $("#cart-modal").on("show.bs.modal", function(e) {
     
        var product_id = $(e.relatedTarget).attr('data-id');
        var url = '{{ url('product-details') }}';

        $.ajax({
           url:url,
           method:'POST',
           data:{ product_id: product_id },

           success:function(response){

              if(response.success){
                    $(".modal-body cart").html(response.html);
              }else{
                  console.log(error)
              }
           },
           error:function(error){
              console.log(error)
           }

        });
    });