Dynamic Bootstrap 4 accordion using Wordpress advanced custom fields

<?php
$counter = 0;
$Accordion_heading_1 = get_field('Accordion_heading_1');
?>

<section id="accordion-1" class="accordion">
    <div class="container">
        <?php if ($Accordion_heading_1) { ?>
            <h2><?php echo $Accordion_heading_1; ?></h2>
        <?php } ?>
        <div class="accordion" id="accordionexample">

            <?php

            // check if the repeater field has rows of data
            if (have_rows('tab_1')):

                // loop through the rows of data
                while (have_rows('tab_1')) : the_row(); ?>

                    <?php
                    $counter++;
                    ?>

                    <div class="card">
                        <div class="card-header" id="heading<?php echo '-' . $counter; ?>">
                            <h2 class="mb-0">
                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapse<?php echo '-' . $counter; ?>" aria-expanded="true"
                                        aria-controls="collapse<?php echo '-' . $counter; ?>">
                                    <?php the_sub_field('question'); ?>
                                </button>
                            </h2>
                        </div>

                        <div id="collapse<?php echo '-' . $counter; ?>" class="collapse"
                             aria-labelledby="heading<?php echo '-' . $counter; ?>" data-parent="#accordionexample">
                            <div class="card-body">
                                <?php the_sub_field('answer'); ?>
                            </div>
                        </div>
                    </div>

                <?php endwhile;

            else :

                // no rows found

            endif;

            ?>

        </div>
    </div>
</section>