Show a Live Count of Repeater Fields in Your Form

/**

 * Update the "Count" field in real-time with the quantity of repeater fields.

 */

function wpf_update_repeater_count() {

    ?>

    <script type="text/javascript">

        (function() {

            // Function to update the Count field

            function updateCountField() {

                // Get the repeater field container

                var repeaterContainer = document.getElementById('wpforms-5410-field_1-container');

                if (!repeaterContainer) return;

                // Find all repeater rows (clones and the initial row)

                var rows = repeaterContainer.querySelectorAll('.wpforms-field-layout-rows');

                var count = rows.length;

                // Set the value of the 'Count' field

                var countInput = document.getElementById('wpforms-5410-field_3');

                if (countInput) {

                    countInput.value = count;

                }

            }

            // Make the Count field read-only

            function makeCountFieldReadOnly() {

                var countInput = document.getElementById('wpforms-5410-field_3');

                if (countInput) {

                    countInput.readOnly = true;

                }

            }

            // Initialize the updater

            function initCountUpdater() {

                makeCountFieldReadOnly();

                var repeaterContainer = document.getElementById('wpforms-5410-field_1-container');

                if (!repeaterContainer) return;

                updateCountField();

                // Create a MutationObserver to watch for changes in the repeater container

                var observer = new MutationObserver(function(mutationsList) {

                    updateCountField();

                });

                // Start observing the repeater container for child list changes

                observer.observe(repeaterContainer, { childList: true, subtree: true });

                // Also update the count when the Add or Remove buttons are clicked

                repeaterContainer.addEventListener('click', function(event) {

                    if (event.target && (event.target.classList.contains('wpforms-field-repeater-button-add') || event.target.classList.contains('wpforms-field-repeater-button-remove'))) {

                        // Use a slight delay to ensure the DOM has updated

                        setTimeout(updateCountField, 50);

                    }

                });

            }

            // Run the initializer when the DOM is ready

            document.addEventListener("DOMContentLoaded", function() {

                initCountUpdater();

            });

        })();

    </script>

    <?php

}

add_action( 'wpforms_wp_footer_end', 'wpf_update_repeater_count', 30 );