Bootstrap模态，奇怪的行为（重复的信息）

Question

我使用的是Laravel 5.5，Bootstrap 3.7和jQuery。

当我打开模态并直接关闭它时，当我在模态中执行动作时，它会执行两次打开功能。

如果我打开并关闭它（直接）三次，那么当我在模态中执行动作时，它会执行四次打开功能。

Finnaly，如果我打开并关闭它（直接）X次，那么当我在模态中执行动作时，它会执行X + 1次打开功能。

它执行所有旧开口和最后一次开口的功能。

HTML：

@foreach(... as $seance)

    ...

            <div class="row">
                <button class="btn btn-primary bouton-reservation" data-toggle="modal" data-target="#reservationModal-{{ $seance->id_seance }}"</button>
            </div>
        </div>
    </div>

    <div class="modal fade reservationModal" id="reservationModal-{{ $seance->id_seance }}" data-seance='{{ $seance->id_seance }}' role="dialog" aria-labelledby="reservationModal-{{ $seance->id_seance }}" aria-hidden="true">

        // modal content with a form.

    </div>
@endforeach

JS：

$(document).ready(function () {

    ...

    $(document).on('shown.bs.modal', '.reservationModal', function (e) {
        // JS content
    });

    $(document).on('hidden.bs.modal', '.reservationModal', function(e) {
        // JS content
    });
});

我希望问题解释得非常清楚......

问题不能来自我使用$(document).on('shown.bs.modal', '#reservationModal', function (e) {而不是$('#reservationModal').on('shown.bs.modal', function (e) {的事实？

为例

在这个例子中，我关闭了模态的2倍，当我在第三次打开后在Nico上选择select时，我的JS附加了3次我的数据。

当我点击Append按钮时，

Ajouter开始，但是，我只点击一次，而不是三次。

此外，当我删除右侧X的信息时，所有信息都会消失。

感谢您的帮助！