[FIXED] Wrap every 3 items and add a div - for each problem

Issue

I want to wrap every 3 items and add a div (.expanded row) after these, then continue with the other rows and repeat the same. This has to the be output:

<div class="intro row">
  <div class="item item-1">name 1</div>
  <div class="item item-2">name 2</div>
  <div class="item item-3">name 3</div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-1">name 1</div>
  <div class="expand" id="item-2">name 2</div>
  <div class="expand" id="item-3">name 3</div>
</div>

<div class="intro row">
  <div class="item item-5">name 4</div>
  <div class="item item-6">name 5</div>
  <div class="item item-7">name 6</div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-5">name 4</div>
  <div class="expand" id="item-6">name 5</div>
  <div class="expand" id="item-7">name 6</div>
</div>

This is the function I'm using to try get it:

<?php // check if the repeater field has rows of data
  if( have_rows('content') ):
  // loop through the rows of data

  // add a counter
  $counter = 0;
  $group = 0;
  // Content Array
  $content_array = array();
  while ( have_rows('content') ) : the_row(); 


    $name = get_sub_field('feature_name');
    $expandedInfo = get_sub_field('feature_info');
    // Adding the Expanded Info
    $content_array[ 'item-' . $counter ] = $expandedInfo;
    if ($counter % 3 == 0) {
      $group++;
    ?>
      <div class="intro row">
    <?php 
    }
  ?>
  <div class="item item-<?php echo $counter; ?>">
    <?php echo $name ?>
  </div><!-- item-->


  <?php 
    if ($counter % 3 == 2) {
    ?>
      </div><!-- intro-->
      <div class="expanded row">
        <?php 

        foreach( $content_array as $item_id => $expanded_info ) {

          echo '<div class="expanded" id="' . $item_id . '">';
          echo $expanded_info;
          echo $name;
          echo '</div>';

        } ?>
      </div>
      <?php 
      // Resetting the Array
      $content_array = array();
    }
    $counter++;
    endwhile;
  else :
  // no rows found
  endif;

  ?>

The problem I have is that the for each function only shows the last $name (name 3 and name 6) on the expanded row and therefore this is the output I have right now, any idea what the problem is and how to solve it?

<div class="intro row">
  <div class="item item-1">name 1</div>
  <div class="item item-2">name 2</div>
  <div class="item item-3">name 3</div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-1">name 3</div>
  <div class="expand" id="item-2">name 3</div>
  <div class="expand" id="item-3">name 3</div>
</div>

<div class="intro row">
  <div class="item item-5">name 4</div>
  <div class="item item-6">name 5</div>
  <div class="item item-7">name 6</div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-5">name 6</div>
  <div class="expand" id="item-6">name 6</div>
  <div class="expand" id="item-7">name 6</div>
</div>

Solution

I'm quite sure it's because your foreach() exists inside the if($counter % 3 == 2) statement and $name does not exist in $content_array, so the value of $name is always of iteration $counter % 3 == 2 and will echo as many times as the length of $content_array.

I must say, this loop construction is not very robust and readable. Consider rewriting your loop in a more "best practice" and scalable way. I don't know what your user/cms functions do on the background, so it's hard to point you to another approach. Also, try to properly escape everything you echo on the page. But that's all off topic.

So to the point, for a quick fix, try to include $name in $content_array like:

$content_array[ 'item-' . $counter ] = array( $expandedInfo, $name );

Then change your foreach() to this:

foreach ( $content_array as $item_id => $info_and_name ) {
    echo '<div class="expanded" id="' . $item_id . '">';
    echo $info_and_name[0];
    echo $info_and_name[1];
    echo '</div>';
}

I think that should do it ;)

Answered By - Bob Vandevliet