I wrote a shortcode to display all my jobs. When there are no jobs, I want to display a message instead of the available jobs. I used an else-statement to do this, but when the message shows, it shows on top of the page instead of the place where I added the shortcode.

My code:

function dfib_jobs_shortcode( $atts ) {
    ob_start();

    $query = new WP_Query( array(
        'post_type' => 'jobpost',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'rand',
    ) ); ?>
    <div class="vacatures__wrapper">
        <?php if ( $query->have_posts() ) { ?>
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <div class="vacature__item">
                    <h4 class="vacature__title"><?php the_title() ?></h4>
                    <?php if ( has_excerpt() ) { 
                        the_excerpt();
                    } else {
                        the_content();
                    } ?>
                    <a class="vacature__btn" href="<?php the_permalink() ?>"><?php _e( 'meer info', 'vdp' ) ?></a>
                </div>
            <?php endwhile; ?>
            <div class="vacature__item spontaan">
                <h4 class="vacature__title"><?php _e( 'Spontaan solliciteren?', 'vdp' ) ?></h4>
                <a class="vacature__btn" href="<?php _e( '/spontaan-solliciteren', 'vdp' ) ?>"><?php _e( 'solliciteren', 'vdp' ) ?></a>
            </div>
            <?php wp_reset_postdata();
            $myvariable = ob_get_clean();
            return $myvariable;
        } else { ?>
            <div class="vacature__item spontaan">
                <h4 class="vacature__title"><?php _e( 'Momenteel zijn er geen vacatures!', 'vdp' ) ?></h4>
                <a class="vacature__btn" href="<?php _e( '/spontaan-solliciteren', 'vdp' ) ?>"><?php _e( 'Spontaan solliciteren', 'vdp' ) ?></a>
            </div>
        <?php } ?>
    </div>
<?php } add_shortcode( 'vacatures', 'dfib_jobs_shortcode' );