bs stepper Uncaught TypeError: this._element is undefined

Question

I have database results (reviews) which reviews can also be reported by the logged user. Before I make these reviews load through AJAX call the bs stepper worked perfectly (it is used for steps while reporting a review). Now when the database results (reviews) are loaded through AJAX call the bs stepper is giving me the following error on page load

Uncaught TypeError: this._element is undefined

Any idea how can I fix this?

Here is how I define bs steppers for each review

@foreach($reviews as $review)

    $("#sendReportButton{{ $review['id'] }}").on('click', function() {
        $("#reportModal{{ $review['id'] }}").modal('toggle');
        $("#submitReportForm{{ $review['id'] }}").submit();
    });

    var stepper{{ $review['id'] }} = new Stepper($('#bs-stepper{{ $review["id"] }}')[0]);
    var stepperElement{{ $review['id'] }} = $("#bs-stepper{{ $review['id'] }}");
    var nextStep{{ $review['id'] }} =  function() {
        stepper{{ $review['id'] }}.next();
    }
    $("#nextButton{{ $review['id'] }}").on('click', nextStep{{ $review['id'] }});
    $("#backButton{{ $review['id'] }}").on('click', function() {
        stepper{{ $review['id'] }}.previous();
    });
    $("#backButton{{ $review['id'] }}").hide();
    stepperElement{{ $review['id'] }}[0].addEventListener('shown.bs-stepper', function (event) {

        if(event.detail.indexStep == 0) {
            $("#nextButton{{ $review['id'] }}").off().removeAttr('disabled').on('click', nextStep{{ $review['id'] }});
            if($("#sendReportButton{{ $review['id'] }}").length == 0) {
                if($("#nextButton{{ $review['id'] }}").hasClass('btn-danger')) {
                    $("#nextButton{{ $review['id'] }}").attr('type', 'button').text('Continue').removeAttr('not-allowed').removeClass('btn-danger').addClass('btn-primary');
                } else if($("#nextButton{{ $review['id'] }}").hasClass('btn-secondary')) {
                    $("#nextButton{{ $review['id'] }}").attr('type', 'button').text('Continue').removeAttr('not-allowed').removeClass('btn-secondary').addClass('btn-primary');
                }
            } else {
                if($("#sendReportButton{{ $review['id'] }}").hasClass('btn-danger')) {
                    $("#sendReportButton{{ $review['id'] }}").attr('type', 'button').text('Continue').removeAttr('not-allowed').removeClass('btn-danger').addClass('btn-primary');
                } else if($("#sendReportButton{{ $review['id'] }}").hasClass('btn-secondary')) {
                    $("#sendReportButton{{ $review['id'] }}").attr('type', 'button').text('Continue').removeAttr('not-allowed').removeClass('btn-secondary').addClass('btn-primary');
                }
            }
            $("#backButton{{ $review['id'] }}").hide();
        }

        if(event.detail.indexStep > 0) {
            $("#backButton{{ $review['id'] }}").show();
        }

        if(event.detail.indexStep == 1) {
            button({{ $review['id'] }});
            if(!$("input[name='reason']").is(':checked')) {
                $("#nextButton{{ $review['id'] }}").off().attr('disabled','disabled');
            }
            $("input[name='reason']").on('change', function() {
                if ($(this).is(':checked')) {
                    $("#nextButton{{ $review['id'] }}").off().removeAttr('disabled').on('click', nextStep{{ $review['id'] }});
                }
            });
        }

        if(event.detail.indexStep == 2) {
            if($("#sendReportButton{{ $review['id'] }}").length == 0) {
                $("#nextButton{{ $review['id'] }}").attr({type:'submit', id:'sendReportButton{{ $review['id'] }}'}).text('Send Report').removeClass('btn-primary').addClass('btn-danger');
            } else {
                $("#sendReportButton{{ $review['id'] }}").attr('type', 'submit').text('Send Report').removeClass('btn-primary').addClass('btn-danger');
            }
        }
    });

@endforeach