Help add ajax load more button

Your div wrapper is within your while loop, and split by your if clause.
This cannot work properly, since your loop will generate up to 14 divs with the id ajax.

Put the opening div tag after if ( $the_query->have_posts() ) { and the closing after wp_reset_postdata(); and you should be fine.

Edit

Are you sure, that you didn’t miss any opening/closing php tags? e.g. load_more_button() is wrapped in php but you didn’t close your php before.

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-md-12' ); ?>>
            <?php the_post_thumbnail('large-thumbnail'); ?>
            <h2><a class="post-title" href="https://wordpress.stackexchange.com/questions/248824/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="https://wordpress.stackexchange.com/questions/248824/<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article><?php

        } else { // Small posts ?>

            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                <h2><a class="post-title" href="https://wordpress.stackexchange.com/questions/248824/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                <?php get_template_part( 'share-buttons' ); ?>
                <a class="moretext" href="https://wordpress.stackexchange.com/questions/248824/<?php the_permalink(); ?>">Read more</a>
                <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();