Передача данных в модальное окно Symfony + Bootstrap

У меня есть есть листинг с кнопками редактирования. и удаления объекта. При клике на удаление появляется модальное окно с подтверждением. Проблема в том, что мне нужно передать правильный ID объекта, который нужно удалить, но скрипт даже не входит в этот ивент, когда модальное окно открывается. В чём проблема? Вот код:

{# @var product \App\Entity\Product #}

<div class="list-group-item list-group-item{% if product.amount < 1 %}-danger{% endif %}">
    <div class="d-flex justify-content-between">
        <span class="mb-1 align-text-top">
            <i class="fa fa-box fa-fw"></i> <a
                    href="{{ path('product_page', {'productId': product.id}) }}">{{ product.name | raw }}</a>
            <span class="badge badge-info">{{ app_get_product_order_count(product) }} / {{ product.amount }}</span>
            <span class="badge badge-primary">{{ product.priceInBTC }} BTC</span>
        </span>

        <div class="btn-group btn-group-sm" role="group" aria-label="Control buttons">
            <a href="{{ path('product_page', {'productId': product.id}) }}" role="button" class="btn btn-warning"><i
                        class="fas fa-edit fa-fw"></i></a>
            <button type="button" id="deleteProduct" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"
                    data-id="{{ product.id }}" data-name="{{ product.name }}"><i
                        class="fas fa-times fa-fw"></i></button>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content alert-danger">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Подтвердите удаление</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body alert-danger">
                Вы действительно хотите удалить товар <strong>{{ product.name }}</strong>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
                <form id="deleteForm" method="post" action="{{ path('product_delete', {'productId': product.id}) }}">
                    <input type="hidden" name="productId" value="{{ product.id }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ product.id) }}">
                    <button class="btn btn-outline-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('frontend/node_modules/jquery/dist/jquery.min.js') }}"></script>
<script type="text/javascript">
    $('#deleteModal').on('show.bs.modal', function (event) {
        document.body.style.backgroundColor = "red";
        alert('Test alert');

        var button = $(event.relatedTarget);
        var id = button.data('id');

        $('#deleteForm').attr("action", "{{ url('product_delete', {'productId': product.id }) }}" + "/" + id);
    })
</script>

Спасибо заранее.