How to pass a product to a modal window?

Good afternoon! Tell me how to transfer the selected product from the cycle to the modal window?

$('.js-modal').on('click', function(e) {
		e.preventDefault();
		var id = $(this).data('modal');
		$.fancybox.open({
			src: '#' + id,
			type: 'inline',
		})
	});

@foreach($category->products as $product)
                        <div class="catalog__item js-modal" data-modal="modal-product">
                            <div class="catalog__item-image">
                                <img src="{{'storage/' . $product->image}}" alt="pizza">
                            </div>
                            <h4 class="catalog__item-name">{{$product->name}}</h4>
                            <p class="catalog__item-desc">{{$product->description}}</p>
                            <div class="catalog__item-bottom">
                                <p class="catalog__item-cost">{{$product->price}} ₽ </p>
                                <button class="btn">Выбрать</button>
                                <button class="plus">
                                    <svg>
                                        <use xlink:href="{{asset('assets/images/sprite.svg#add')}}"></use>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    @endforeach