How to make previous and next button works in pugjs?

问题

-
    var INDEX = 0;
    const welcomeModalData = [
        {
            image: "welcome-modal-img-1.svg"
        },
        {
            image: "welcome-modal-img-2.svg",
        }
    ]

if welcomeModalData[INDEX].image != ""
    img.feature-img#feature-img(src=`${welcomeModalData[INDEX].image}` alt="")
.welcome-modal__footer-paging
    button#previous-btn(type="button" onclick="onClickPreviousBtn()") Previous tip
    button#next-btn(type="button" onclick="onClickNextBtn()") Next tip
    p#pageination 1 of #{welcomeModalData.length}

script.
    var previousBtn = document.getElementById("previous-btn");
    var nextBtn = document.getElementById("next-btn");
    var featureImg = document.getElementById("feature-img");
    var pageination = document.getElementById("pageination");

    function onClickPreviousBtn()
    {
        if (#{INDEX} > 0) {
            #{INDEX -= 1};
            featureImg.src = "#{welcomeModalData[INDEX].image}";
            pageination.textContent = `#{INDEX+1} of #{welcomeModalData.length}`;
        }
    }

    function onClickNextBtn()
    {
        if (#{INDEX+1} < "#{welcomeModalData.length}") {
            #{INDEX += 1};
            featureImg.src = "#{welcomeModalData[INDEX].image}";
            pageination.textContent = `#{INDEX+1} of #{welcomeModalData.length}`;
        }
    }

This is my welcome-modal in Pugjs code. Here, I want to make the changing image(and texts) when clicking the button. Data is JSON data including images and texts(for In my example code, I provided the image only). When clicking the Previous and Next button, INDEX is decreased and increase, and then show the data as the INDEX at JSON data. But I don't know how to control the INDEX in Pugjs script. I have ever tried 'Pugjs variable' and 'script variable' as INDEX. Anybody, can you help me?

来源：https://stackoverflow.com/questions/65788841/how-to-make-previous-and-next-button-works-in-pugjs