Closing tags are not being executed

Question

I'm loading a template with ajax and I'm trying to close a few divs and a section in which the opening tags are in a different file. The closing tags aren't being recognized on the front-end, while it is recognized when I simply type something like 'test' where I now close the tags.

How can I make it recorgnize the closing tags?

    {paginate}
            {pagination_links}
</div>
</div>
</div>
</section>
                {next_page}
                    <div class="loadmore">
                        <p>Laad meer...</p>
                        <a href="{pagination_url}" id="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
                    </div>
                {/next_page}
            {/pagination_links}
        {/paginate}

Edit:

So this is the main template:

    {layout="_layouts/vervolg"}

{layout:set name="main_content"}
<div class="all-projects">
<section>
    <div class="container">
        <div class="projects">
            <div class="col-md-12 col-sm-12 col-sm-12 col-xs-12">
                <h1>WIJ WERKTEN EERDER AAN<span class="blue"> DEZE PROJECTEN</span></h1>
            </div>
            <div class="row_projects">
                <div id="portfolio_loader">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only">Laden...</span>
                        </div>
                    </div>
                </div>
                <div id="portfolio">
                </div>
            </div>
        </div>
    </div>
</section>

</div>
{/layout:set}

I'm loading the ajax in the tag. In order to make my template look okay, the load more button should be placed directly under the tag, but because the load more button is in the ajax template in order for it to work, it's not in the template above but in the ajax template right here:

    <script>
    $( "#load_more" ).click(function(e) {
        e.preventDefault();

        var url = $('#load_more').attr('href');

        $.ajax({url: url, success: function(result){
            $("#portfolio").append(result);
        }});

        $('.loadmore').remove();
    });
</script>

                {exp:channel:entries
                    channel="portfolio"
                    dynamic="no"
                    limit="1"
                    paginate="bottom"
                    paginate_base="/ajax/{segment_2}"
                    disable="categories|member_data"
                }
                <div class="col-md-3 col-sm-4 col-xs-6 portfolio-item">
                    <div class="square_box">
                        <div class="square-box">
                            <div class="overlay"><a href="{page_url}">{exp:ce_img:single src="{portfolio_afbeelding}" class="img-square img-responsive" crop="yes" width="330" height="264"}</a></div>
                            <h4>{title}</h4>
                            <h6><strong>Velg:</strong> {portfolio_velg}.</h6>
                            {exp:streeng characters="100" append="&nbsp;- <a href='{page_url}'>Lees verder</a>"}
                            {portfolio_content}
                            {/exp:streeng}
                        </div>
                    </div>
                </div>


        {paginate}
            {pagination_links}
</div>
</div>
</div>
</section>
                {next_page}
                    <div class="loadmore">
                        <p>Laad meer...</p>
                        <a href="{pagination_url}" id="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
                    </div>
                {/next_page}
            {/pagination_links}
        {/paginate}

    {/exp:channel:entries}

As stated below however, the and tags aren't being recognized here and are being closed in my 'main' template instead of in the ajax template. To be clear: removing the closing tags in my 'main' template doesn't make a difference.

Answer 1

Here, You can call default template as EE embed and use the same for ajax load. This will definitely help. (As I didn't tested the code, You may need to have some changes on code below)

Main template code:

{layout="_layouts/vervolg"}

{layout:set name="js"}
    <script type="text/javascript">
        $(document).on('click', '.load_more', function(e){
            e.preventDefault();
            $('.load_more').addClass('temp');

            var url = $('.load_more').attr('href');
            $.ajax({url: url, success: function(result){
                $("#portfolio").append(result);
            }});

            $('.temp').remove();
        });
    </script>
{/layout:set}

{layout:set name="main_content"}
<div class="all-projects">
<section>
    <div class="container">
        <div class="projects">
            <div class="col-md-12 col-sm-12 col-sm-12 col-xs-12">
                <h1>WIJ WERKTEN EERDER AAN<span class="blue"> DEZE PROJECTEN</span></h1>
            </div>
            <div class="row_projects">
                <div id="portfolio_loader">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only">Laden...</span>
                        </div>
                    </div>
                </div>
                <div id="portfolio">
                    {!--Load file by default--}
                    {embed="ajax/my-file"}
                </div>
            </div>
        </div>
    </div>
</section>

</div>
{/layout:set}

Ajax Template code: (That is embed on load and then trigger via ajax every time)

{exp:channel:entries
    channel="portfolio"
    dynamic="no"
    paginate="bottom"
    disable="categories|member_data"
    limit="1"
}
    <div class="col-md-3 col-sm-4 col-xs-6 portfolio-item">
        <div class="square_box">
            <div class="square-box">
                <div class="overlay"><a href="{page_url}">{exp:ce_img:single src="{portfolio_afbeelding}" class="img-square img-responsive" crop="yes" width="330" height="264"}</a></div>
                <h4>{title}</h4>
                <h6><strong>Velg:</strong> {portfolio_velg}.</h6>
                {exp:streeng characters="100" append="&nbsp;- <a href='{page_url}'>Lees verder</a>"}
                {portfolio_content}
                {/exp:streeng}
            </div>
        </div>
    </div>

    {paginate}
        {pagination_links}
        {next_page}
            <div class="loadmore">
                <p>Laad meer...</p>
                <a href="{pagination_url}" class="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
        {/next_page}
        {/pagination_links}
    {/paginate}
{/exp:channel:entries}