I have a Laravel 9 application that I’m hosting it on a shared hosting with PHP 8.3.

I have a tiny text editor in my admin panel that I want to show the content sent from it in two different ways in my front-end. These ways are:

1. If there is less than two <h2> elements in the content sent to the view, the content will be shown as it is and there won’t be a sticky side navbar for each section, like the image below:

2. But if there is at least two <h2> elements in the sent content there will be a sticky navbar in the left with links to each section which consists of an <h2> element and the elements after it until the next <h2> element or the end of the content just like the image below:

I have some styling and JS that is responsible fir hiding the navbar on small devices and change the order of some elements such as showing the keywords (tag) at the bottom on small devices. For this I’ve tried a code like below:

<div class="row">
    <!-- Sidebar -->
    <div class="col-md-3">
        <div class="title-sm">
            <h2>
                {{$service->title}}
            </h2>
            <ul class="entry-meta">
                <li>{{ $service->updated_at->format('F d, Y') }}</li>
            </ul>
        </div>
        <div class="sidebar">
            <h2>
                {{$service->title}}
            </h2>
            <ul class="entry-meta">
                <li>{{ $service->updated_at->format('F d, Y') }}</li>
            </ul>
            @php
            $dom = new DomDocument();

            @$dom->loadHTML(mb_convert_encoding($service->content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
            $h2Elements = $dom->getElementsByTagName('h2');
            $sections = [];


            foreach ($h2Elements as $index => $h2) {
            $id = 'section' . ($index + 1); // Create an ID for the section
            $sections[$id] = ['title' => $h2->nodeValue, 'content' => ''];
            // Gather content until the next H2 or end of the document
            $node = $h2->nextSibling;
            while ($node) {
            if ($node instanceof DOMElement && $node->tagName == 'h2') {
            break;
            }
            $sections[$id]['content'] .= $dom->saveHTML($node);
            $node = $node->nextSibling;
            }
            }
            @endphp

            @if(count($sections) > 1)
            <ul id="content-navbar" class="list-group list-group-light border py-0">
                @foreach($sections as $id => $section)
                <li class="list-group-item border-0 py-0"><a href="#{{ $id }}" class="nav-link py-0">{{ $section['title'] }}</a></li>
                @endforeach
            </ul>
            @if($service->meta_keywords)
            @php
            $metaKeywords = explode(",", trim($service->meta_keywords));
            @endphp
            <div class="entry-tags">
                <h6>Anahtar Kelimeler:</h6>
                @foreach($metaKeywords as $metaKeyword)
                <span class="badge badge-light">{{$metaKeyword}} </span>
                @endforeach
            </div>
            @endif
            @endif
        </div>

    </div>
    @if(count($sections) > 1)
    <div class="col-md-8 main-content">
        @foreach($sections as $id => $section)
        <section id="{{ $id }}">
            <h2>{{ $section['title'] }}</h2>
            {!! $section['content'] !!}
        </section>
        @endforeach
    </div>
    @else
    <div class="col-md-12 main-content">
        {!! $service->content !!}
        <div class="keywords-md">
            @if($service->meta_keywords)
            @php
            $metaKeywords = explode(",", trim($service->meta_keywords));
            @endphp
            <div class="entry-tags">
                <h6>Anahtar Kelimeler:</h6>
                @foreach($metaKeywords as $metaKeyword)
                <span class="badge badge-light">{{$metaKeyword}} </span>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    @endif


    <!-- Content -->

    <div class="keywords-sm">
        @if($service->meta_keywords)
        @php
        $metaKeywords = explode(",", trim($service->meta_keywords));
        @endphp
        <div class="entry-tags">
            <h6>Anahtar Kelimeler:</h6>
            @foreach($metaKeywords as $metaKeyword)
            <span class="badge badge-light">{{$metaKeyword}} </span>
            @endforeach
        </div>
        @endif
    </div>
</div>

On my local machine, everything is OK but when I run try to deploy the project on a shared hosting (Hostinger), for some reason the content of first section is being shown as the first navbar item. I mean If my first section has an element with “One” text in it and a <p> element right after it with “This is one” text, I expect to see a navbar item like “One” but I see “OneThis is oneOneThis is oneTwoThis is twoThreeThis is threeFourThis is four” and the other contents. Also the first section gets only a heading with the same text just like the image below:

Why is this OK on my local but problematic on my shared hosting? How can I solve this?