The js properties of the modal window do not work for all posts on the site. What to do?

Question

JavaScript

You can create posts on the site. I decided to make modal windows for these posts. And made their functionality through js. But it gives the error "Uncaught SyntaxError: Identifier 'popupLinks' has already been declared". That is, this variable is already used for the last released post, but not for the past ones. How to make everything work for all posts on the site, for past and future. UPD: I replaced const with var and the code started working for all posts except the very first one. I think it's in index. Here is the code:

const popupLinks = document.querySelectorAll('.popup_link');
const body = document.querySelector('html');
const lockPadding = document.querySelectorAll(".lock_padding");

let unlock = true;

const timeout = 800;

if (popupLinks.length > 0) {
    for (let index = 0; index < popupLinks.length; index++) {
        const popupLink = popupLinks[index];
        popupLink.addEventListener("click", function (e) {
            const popupName = popupLink.getAttribute('href').replace('#', '');
            const curentPopup = document.getElementById(popupName);
            popupOpen(curentPopup);
            e.preventDefault(); 
        });
    }
}

// Added close popup object
const popupCloseIcon = document.querySelectorAll('.close_popup');
if (popupCloseIcon.length > 0) {
    for (let index = 0; index < popupCloseIcon.length; index++) {
        const el = popupCloseIcon[index];
        el.addEventListener('click', function (e) {
            popupClose(el.closest('.popup'));
            e.preventDefault();
        });
    }
}

// Open popup function
function popupOpen(curentPopup) {
    if (curentPopup && unlock) {
        const popupActive = document.querySelector('.popup.open');
        if (popupActive) {
            popupClose(popupActive, false);
        } else {
            bodyLock(); // Scroll block
        }
        curentPopup.classList.add('open');
        curentPopup.addEventListener("click", function (e) {
            if (!e.target.closest('.popup_content')) {
                popupClose(e.target.closest('.popup'));
            }
        });
    }
}

// Close popup
function popupClose(popupActive, doUnlock = true) {
    if (unlock) {
        popupActive.classList.remove('open');
        if (doUnlock) {
            bodyUnlock();
        }
    }
}

// Blocking scroll
function bodyLock() {
    // Calculating the scrollbar width
    const lockPaddingValue = window.innerWidth - document.querySelector('.html_wrapper').offsetWidth + 'px';

    if (lockPadding.lenght > 0) {
        for (let index = 0; index < lockPadding.length; index++) {
            const el = lockPadding[index];
            el.style.paddingRight = lockPaddingValue;
        }
    }
    body.style.paddingRight = lockPaddingValue;
    body.classList.add('lock');

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

// Unblocking scroll
function bodyUnlock() {
    setTimeout(function () {
        if (lockPadding.lenght > 0) {
            for (let index = 0; index < lockPadding.lenght; index++) {
                const el = lockPadding[index];
                el.style.paddingRight = '0px';
            }
        }
        body.style.paddingRight = '0px';
        body.classList.remove('lock');
    }, timeout);

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

// Close popup if Esc click
document.addEventListener ('keydown', function (e) {
    if (e.number === 27) {
        const popupActive = document.querySelector('.popup.open');
        popupClose(popupActive);
    }
});

Answer 1

I changed all const to var and got to some point when everything worked. I don't know exactly what was the matter. But here is the code:
var popupLinks = document.querySelectorAll('.popup_link');
var body = document.querySelector('html');
var lockPadding = document.querySelectorAll(".lock_padding");
var unlock = true;
var timeout = 400;
if (popupLinks.length > 0) {
for (let index = 0; index < popupLinks.length; index++) {
const popupLink = popupLinks[index];
popupLink.addEventListener("click", function (e) {
const popupName = popupLink.getAttribute('href').replace('#', '');
const currentPopup = document.
popupOpen(currentPopUp);
e.preventDefault();
});
}
}
// Added close popup object
var popupCloseIcon = document.querySelectorAll('.close_popup');
if (popupCloseIcon.length > 0) {
for (let index = 0; index < popupCloseIcon.length; index++) {
const el = popupCloseIcon[index];
el.addEventListener('click', function (e) {
popupClose(el.closest('.popup'));
e.preventDefault();
});
}
}
// Open popup function
function popupOpen(currentPopup) {
if (currentPopup && unlock) {
const popupActive = document.querySelector('.popup.open');
if (popupActive) {
popupClose(popupActive, false);
} else {
bodyLock(); // Scroll block
}
currentPopup.classList.add('open');
curentPopup.addEventListener("click", function (e) {
if (!e.target.closest('.popup_content')) {
popupClose(e.target.closest('.popup'));
}
});
}
}
// Close popup
function popupClose(popupActive, doUnlock = true) {
if (unlock) {
popupActive.classList.remove('open');
bodyUnlock();
}
}
}
// Blocking scroll
function bodyLock() {
// Calculating the scrollbar width
const lockPaddingValue = window.innerWidth - document.querySelector('.html_wrapper').offsetWidth + 'px';
if (lockPadding.lenght > 0) {
for (let index = 0; index < lockPadding.length; index++) {
const el = lockPadding[index];
el.style.paddingRight = lockPaddingValue;
}
}
body.style.paddingRight = lockPaddingValue;
body.classList.add('lock');
unlock=false;
setTimeout(function() {
unlock = true;
},timeout);
}
// Unblocking scroll
function bodyUnlock() {
setTimeout(function () {
if (lockPadding.lenght > 0) {
for (let index = 0; index < lockPadding.lenght; index++) {
const el = lockPadding[index];
el .style.paddingRight = '0px';
}
}
body.style.paddingRight = '0px';
body.classList.remove('lock');
}, timeout);
unlock=false;
setTimeout(function () {
unlock = true;
}, timeout);
}