Saving data from multiple ACF forms within foreach loop

• Avramoski

• February 22, 2021 at 4:57 am

Hi guys.
I have an app built with ACF where I list multiple forms in the front-end, where the user need to enter some numbers and save the form.
However I have trouble saving the forms because they are within foreach loop and when the first form is Updated, all other forms get the same numbers from the first form.
Can you please give me some guidelines on how to solve this issue? I want the user to update and save data from each form with different numbers.

Here’s how the app looks on the front-end:
https://prnt.sc/102zabl

Here’s my code so far for this:

<?php if( have_rows('add_zone') ): ?>
<div style="margin-bottom:30px">
  <?php while( have_rows('add_zone') ): the_row(); ?>
  <div class="zone-title"><?php the_sub_field('select_zone'); ?></div>
    <?php $select_collectors = get_sub_field( 'select_collectors' ); ?>
      <?php if ( $select_collectors ) : ?>
        <?php foreach ( $select_collectors as $post_ids ) : ?>
          <button class="accordion"><?php echo get_the_title( $post_ids ); ?> <i class="fa fa-caret-down"></i></button>
          <div class="panel">
            <form id="post" class="acf-tyres-form" action="" method="post" autocomplete="off">
              <?php
              acf_form(array(
              'field_groups' => array(312),
              'form' => true,
               'form_attributes' => array('autocomplete' => "off"),
              ));
              ?>
            </form>
          </div>
          <?php endforeach; ?>
</div>

<?php endif; ?> 
<?php endwhile; ?>
<?php endif; ?>

Here’s the AJAX code for my Update button:

<script>
	acf.add_action('submit', function($form){

            var formdata = new FormData($form[0]);

            $.ajax({
                url: window.location.href,
                method: 'post',
                data: formdata,
                cache: false,
                processData: false,
                contentType: false,
                success: function(data) {
                    acf.validation.toggle($form, 'unlock');
                    $form.prepend('<div class="acf-error-message -success">' + data + '</div>');
                    $('html,body').animate({
                        scrollTop: $form.offset().top - 150
                    }, 500);
                    $('.acf-form button[type="input"]').prop('disabled', false);

                }
            });
        });
</script>

I am missing something in my form code and any help is appreciated.
Thanks