Group/list/sort custom post type posts by date in tabs from acf datepicker field

Question

im working with foundation tabs and i want to sort my custom posts by YEAR from datepicker field. Each tab is a year (2016 2015 etc). When users click on the tab and displays is, all the custom posts that had that event-date meta field (acf datepicker field) will then display and be listet in that tabs content. But now with my code it lists every posts in its own tab wich results in multiple tabs with the same year like this (2015-2015-2015-2016-2016) Instead of (2016-2015-2014-2013) with posts lited in tab content. This example here is what i am trying to achieve: exactly what i am after

I am not sure where i am at right now but i have done a lot and nothing does what its supposed to. Never done something like this before so i am probably a little ou of my leage here but i would like to know how this could be done and what i need to change in my code to get it done. Here is my code so far:

$currentTime = current_time('Ymd'); // getting current time                 
$format_in = 'd/m/Y'; // the format your value is saved in (set in the field options)
$format_out_fields = 'Y'; // the format you want to end up with
$date = DateTime::createFromFormat($format_in, get_field('event_date'));

$args = array(
    'post_type' => 'cpt',
    'posts_per_page' => -1,
    'orderby'   => 'meta_value',
    'meta_key'  => 'acf_field',
    'order'     => 'DEC',
);
$subsQuery = new WP_Query( $args );
?>
<?php if ( $subsQuery->have_posts() ) : ?>
<?php section_open(); ?>
<h2 class="type2"><?php _e('H1 tabs', 'theme'); ?></h2>
<?php innerSection_open(); ?>

<?php /////////  TABS TITLE / BUTTONS  ///////////// ?>
<ul class="tabs" data-tabs id="tabs">   
    <?php 
    $counter = 0; 
    while ( $subsQuery->have_posts() ) : $subsQuery->the_post();
    ++$counter;

    $format_in = 'd/m/Y'; // the format your value is saved in (set in the field options)
    $format_out = __('jS F Y', 'theme'); // the format you want to end up with
    $date = DateTime::createFromFormat($format_in, get_field('acf_field'));
    ?>


        <li class="tabs-title <?php if ( $counter == 1 ) { echo "is-active"; } ?>">
            <a href="#panel-<?php the_ID(); ?>" <?php if ( $counter == 1 ) { echo 'aria-selected="true"'; } ?>>
                <?php
                $format_in = 'd/m/Y'; // the format your value is saved in (set in the field options)
                $format_out_tabs = 'Y'; // the format you want to end up with
                $date = DateTime::createFromFormat($format_in, get_field('acf_field'));
                echo $date->format( $format_out_tabs );
                ?>
            </a>
        </li>

    <?php endwhile; ?>
</ul>
    <?php /////////  TABS CONTENT  ///////////// ?>
<div class="tabs-content" data-tabs-content="tabs"> 
    <?php 
    $counter = 0; 
    while ( $subsQuery->have_posts() ) : $subsQuery->the_post();
    ++$counter;
    ?>

        <?php 
        $format_in = 'd/m/Y'; // the format your value is saved in (set in the field options)
        $format_out = __('j.m.Y', 'theme'); // the format you want to end up with
        $format_out_year = __('Y', 'theme'); // the format you want to end up with
        $date = DateTime::createFromFormat($format_in, get_field('event_date'));
        $date_year = DateTime::createFromFormat($format_in, get_field('event_date'));
        ?>

        <div class="tabs-panel <?php if ( $counter == 1 ) { echo "is-active"; } ?>" id="panel-<?php the_ID(); ?>">

            <span><?php echo $date->format( $format_out ); ?>:</span><br/>
            <span class="bold">
            <?php if( get_field( 'acf_type' ) == "event") { ?>
            <?php _e('Event', 'theme'); ?>:
            <?php } ?>
            <?php
            $theTitle = get_the_title();
            echo $theTitle;
            ?>
            </span><br/>

                <?php if( get_field( 'link' )) { ?>
                <?php if (isexternal(get_field('link')) == true ) { ?>
                <a href="<?php the_field('event_link' ); ?>" target="_blank" style="text-decoration: underline;"><?php _e('Read more', 'theme'); ?>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
                <?php } ?>
            <?php } ?>


        </div>

    <?php endwhile; ?>
</div>

Answer 1

It's probably best to loop through your posts two times. Once to group them by year and once to print the posts.

Something like this: (not tested)

$formatted_posts = array();
while ( $subsQuery->have_posts() ) : $subsQuery->the_post();
  $year = get_field('year');
  // add them to formatted_posts array and group by year
  $formatted_posts[$year][] = $post;
endwhile; 

foreach($formatted_posts as $year => $posts) {
  // print $year
  foreach($posts as $post) {
    // print $post
  }
}