When I increment currentIndex whenever I click the next button, the value of currentIndex returns to its default value which is 1 here. So the update of currentIndex doesn't persist. Does anyone have any idea why? And how can I solve this problem?

    let inputBoxNum = 3
    let currentIndex
    {{ $currentIndex = 1 }}
    updateButtons()
    $('.back-btn, .next-btn').on('click', function (e) {
        console.log({{$currentIndex}}) // returns 1 even if this function was called before
        let btnClicked = e.target.className.includes('next-btn') ? 'next' : 'back'
        if (btnClicked === 'next') {
            {{$currentIndex += 1}} // it increments to 2
            console.log({{$currentIndex}}) // returns 2
            $('#create-input-box').html(`@include('reservations.create-input-box-'.$currentIndex)`)
        } else {
            $('#create-input-box').html(`@include('reservations.create-input-box-'.$currentIndex)`)
        }
        updateButtons()
    })
    function updateButtons() {
        getCurrentIndex()
        if (currentIndex <= 1) {
            $('.back-btn').hide()
            $('.next-btn').show()
        } else if (currentIndex > 1 && currentIndex < inputBoxNum) {
            $('.back-btn').show()
            $('.next-btn').show()
        } else {
            $('.back-btn').show()
            $('.next-btn').hide()
        }
    }

    function getCurrentIndex() {
        currentIndex = parseInt($('#create-input-box')[0].children[0].className.split("-")[3])
    }