Bootstrap ACF Foreach & While Loop of Modals

foreach-modal.php

<?php 

$modals = array( 'modal1', 'modal2', 'modal3', 'modal4' );// Set the array
$i = 1; // Set the increment variable
foreach( $modals as $modal ):  

?>

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i; // Displaying the increment ?>">
  Open modal <?php echo $i;?>
</button>

<!-- The Modal -->
<div class="modal" id="myModal-<?php echo $i; // Displaying the increment ?>">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
       I am  <?php echo $modal; // Displaying the modal name ?>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
              
<?php   $i++; // Increment the increment variable

endforeach; //End the loop ?>

while-acf-modal-loop-shortcode.php

<?php // <- remove and add code in functions.php

add_shortcode( 'wpb_while_modals_acf', 'wpb_while_modals_acf' );
/**
* Bootstrap ACF While Loop Modals
*/
function wpb_while_modals_acf() {
ob_start();

// *Repeater
// modal_repeater
// *Sub-Fields
// modal_header
// modal_body
// modal_footer

// check if the repeater field has rows of data
if( have_rows('modal_repeater') ):
	$i = 1; // Set the increment variable
 	// loop through the rows of data
    while ( have_rows('modal_repeater') ) : the_row();
		
		$modal_header = get_sub_field('modal_header');
		$modal_body = get_sub_field('modal_body');
		$modal_footer = get_sub_field('modal_footer');
	?>
	
	<!-- Button to Open the Modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i;?>">
	  Open modal <?php echo $i;?>
	</button>
	
	<!-- The Modal -->
	<div class="modal" id="myModal-<?php echo $i;?>">
	  <div class="modal-dialog">
	    <div class="modal-content">
	
	      <!-- Modal Header -->
	      <div class="modal-header">
	        <h4 class="modal-title"><?php echo $modal_header;?></h4>
	        <button type="button" class="close" data-dismiss="modal">×</button>
	      </div>
	
	      <!-- Modal body -->
	      <div class="modal-body">
	       <?php echo $modal_body; ?>
	      </div>
	
	      <!-- Modal footer -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-danger" data-dismiss="modal"><?php echo $modal_footer; ?></button>
	      </div>
	
	    </div>
	  </div>
	</div>
	              
	<?php   $i++; // Increment the increment variable
	
	endwhile; //End the loop 

else :

    // no rows found

endif;
  
return ob_get_clean();
}

while-acf-modal-loop.php

<?php
/**
* Bootstrap ACF While Loop Modals
*/

// *Repeater
// modal_repeater
// *Sub-Fields
// modal_header
// modal_body
// modal_footer

// check if the repeater field has rows of data
if( have_rows('modal_repeater') ):
	$i = 1; // Set the increment variable
 	// loop through the rows of data
    while ( have_rows('modal_repeater') ) : the_row();
		
		$modal_header = get_sub_field('modal_header');
		$modal_body = get_sub_field('modal_body');
		$modal_footer = get_sub_field('modal_footer');
	?>
	
	<!-- Button to Open the Modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i;?>">
	  Open modal <?php echo $i;?>
	</button>
	
	<!-- The Modal -->
	<div class="modal" id="myModal-<?php echo $i;?>">
	  <div class="modal-dialog">
	    <div class="modal-content">
	
	      <!-- Modal Header -->
	      <div class="modal-header">
	        <h4 class="modal-title"><?php echo $modal_header;?></h4>
	        <button type="button" class="close" data-dismiss="modal">×</button>
	      </div>
	
	      <!-- Modal body -->
	      <div class="modal-body">
	       <?php echo $modal_body; ?>
	      </div>
	
	      <!-- Modal footer -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-danger" data-dismiss="modal"><?php echo $modal_footer; ?></button>
	      </div>
	
	    </div>
	  </div>
	</div>
	              
	<?php   $i++; // Increment the increment variable
	
	endwhile; //End the loop 

else :

    // no rows found

endif;