$(document).ready(function() {
            var header = $(document).find("h2")
            for (let index = 0; index < header.length; index++) {
                header[index].id = index
            }
            if (header.length === 0) {
                $('#leftSide').removeClass('col-lg-3');
                $('#leftSide').addClass('d-none');
                $('#centerSide').removeClass('col-lg-6');
                $('#centerSide').addClass('col-lg-9');
            } else {
                $(".headers-in-here").html(
                    $("h2[id]").get().map(element =>
                        `<li id="tablistcontent" class="tablistcontent line-clamp-1" style="list-style: none;font-size: 14px;font-weight: 500; border-left: 1px solid #80808099;padding-left: 0px; padding-bottom: 0px;" onclick="activeEl(event)"><a href="#${element.id}"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#0F0F0F"></path> </g></svg><span class="hover-list-transition">${$(element).text()}</span></a></li>`
                    ).join("")
                );
            }
            // $(document).on("scroll", onScroll);
        });

        function activeEl(event, abc) {
            var i, tablinks;
            tablinks = document.getElementsByClassName("tablistcontent");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active-content", "");
            }
            event.currentTarget.className += " active-content";
        }

        // Bind to scroll
        function onScroll(event) {
            var scrollPos = $(document).scrollTop();
            $('#headers-in-here a').each(function() {
                var currLink = $(this);
                console.log('currLink', currLink)
                var refElement = $(currLink.attr("href"));
                if (refElement.position().top <= scrollPos + 345 && refElement.position().top + refElement
                    .height() >
                    scrollPos) {
                    $('#headers-in-here ul li').removeClass("active-content");
                    currLink.addClass("active-content");
                } else {
                    currLink.removeClass("active-content");
                }
            });
        }