Cuando incremento currentIndex cada vez que hago clic en el botón siguiente, el valor de currentIndex vuelve a su valor predeterminado, que es 1 aquí. Entonces, la actualización de currentIndex no persiste. ¿Alguien tiene alguna idea de por qué? y como puedo solucionar este problema?

 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]) }