Post Archive List Shortcode - Display is weird

[greenink1]

Hi, greetings all, I’ve created a shortcode to display an archived list for each category of my regular posts.

I’ve placed the shortcode in Elementor’s ‘shortcode’ module, and something strange is happening - the thumbnail and excerpt is separate (shows up above) from the title and linked button (all of which shows up below).

Can anyone figure out why this might be the behaviour based on the code below. I can give more details as needed. See code below, and screenshot attached.

Jan

Shortcode:
[jmtm_recent_posts cat="68" num="9" order="asc"]

Code in functions.php file:

// Created this shortcode to display posts from category
function jmtm_shortcode_display_post($attr, $content = null){
 
    global $post;
 
    // Defining Shortcode's Attributes
    $shortcode_args = shortcode_atts(
                        array(
                                'cat'     => '',
                                'num'     => '5',
                                'order'  => 'desc'
                        ), $attr);    
     
    // array with query arguments
    $args = array(
                    'cat'            => $shortcode_args['cat'],
                    'posts_per_page' => $shortcode_args['num'],
                    'order'          => $shortcode_args['order'],
                     
                 );
 
     
    $recent_posts = get_posts($args);
 
    $output = '<div><ul class="courselist-home">';
 
    foreach ($recent_posts as $post) :
         
        setup_postdata($post);

        $output .= '<li><a href="'.get_permalink().'">'.the_excerpt("100").''.the_post_thumbnail("thumbnail").'<h5>'.get_the_title().'</h5></a><button type="button"><a href="'.get_permalink().'">More Info</a></button></li>';
 
    endforeach;    
     
    wp_reset_postdata();
 
    $output .= '</ul></div>';
     
    return $output;
 
}
 
add_shortcode( 'jmtm_recent_posts', 'jmtm_shortcode_display_post' );