How do I group results from wp-query

Question

I've got a custom post type for staff. The fields are first_name, last_name, job_title, telephone, email, and notes. All staff are categorized by location using WP core Category. I need to output the staff directory for each location, and I'd like to group by job_title and order by last_name. I have the following query for the New Jersey location. This query orders by job_title and last_name:

$args = array(
          'post_type' => 'staff',
          'post_status' => 'publish',
          'posts_per_page' => -1,
          'cat' => 14,
            'meta_query' => array(
                'relation' => 'AND',
                'title_clause' => array(
                    'key' => 'job_title',
                    'compare' => 'EXISTS',
                ),
                'name_clause' => array(
                    'key' => 'last_name',
                    'compare' => 'EXISTS',
                ), 
            ),
            'orderby' => array( 
                'title_clause' => 'ASC',
                'name_clause' => 'ASC',
            ),
        );
        
        $staff = new WP_Query($args); //var_dump($staff);

while($staff-> have_posts() ): $staff-> the_post(); // output results

Here's my markup:

<div class="staff-element ">
              <p class="nametag"><span class="name"><?php the_title(); ?></span><?php echo ' - '; the_field('job_title'); ?></p>
              <p><i class="fa-solid fa-phone"></i>
                <a href="tel: <?php the_field('telephone_number'); ?>">
                <span class="phone"><?php the_field('telephone_number'); ?></span></a>
                <span class="ext"><?php if (get_field('telephone_extension')) : echo 'Ext. '; the_field('telephone_extension'); endif; ?></span></p>
              <p>    
                <i class="fa-solid fa-envelope"></i><a href="mailto: <?php the_field('email_address'); ?>"><span class="email"><?php the_field('email_address'); ?></span></a>
              </p>
            </div> <!-- end staff-element -->

.staff-element { float:left; width:33%; display:inline-block; }

What I can't figure out is how to add a break and a line element at the end of each job type so the floated elements are separated by job_title. In other words I want all Administration employees grouped in one section, all Inside Sales in another, and Outside Sales in another.

I know I could create a separate query for each job_title, but I want to minimize the number of DB requests. Can anyone suggest how I might accomplish this? Many thanks.

Answer 1

Need to track the previous job title, and if it's different, insert your line break.

Untested:

$prev_job_title = null;

while ( $staff->have_posts() ) {
    $staff->the_post();

    $job_title = get_post_meta( get_the_ID(), 'job_title', true );

    if ( $prev_job_title !== $job_title ) {
        printf( '<h2>%s</h2>', esc_html( $job_title ) );
        $prev_job_title = $job_title;
    }

    // Staff markup.
}