Есть цикл, чтобы по клику выезжал следующий input, у меня их 3, но клик работает только 1 раз

Question

Есть цикл, чтобы по клику выезжал следующий инпут, у меня их 3, но клик работает только 1 раз, что мне сделать чтобы при нажатии выехал еще и 3й инпут Прикрепляю ссылку на мои попытки fiddle Подскажите пожалуйста что я делаю не так, желательно без jQuery

<form action="">
        <div class="first">
            <input type="text" class="input_tr" placeholder="name">
            <input type="text" class="input_tr" placeholder="city">
            <input type="text" class="input_tr" placeholder="Email">
            <a class="next" id="next1">next</a>
        </div>
</form>


.input_tr
  display: flex
  border: 2px solid green
  margin-right: 500px
  transform: translateX(0px)
  transition: all 1s ease
  &.active
      transform: translateX(-650px)
.first
  display: flex
  flex-direction: row
.next
  padding: 10px 30px
  background: grey
  transform: translateY(0)
  display: flex
  transition: all 0.45s ease
  position: fixed
  top: 5px
  left: 170px
  &:hover
      transform: translateY(5px)


const nextBut = document.querySelector('.next');
const inputTest = document.querySelectorAll('.input_tr');
console.log(nextBut, inputTest);

nextBut.onclick = () => {
     for (let i = 0; i < 3; i++) {
         inputTest[i].classList.add('active'); // рабочее  
         console.log('====')
     }
 }

Answer 1

Сделал слайдером Slick! код прикрепляю, возможно кому-то пригодится

$(document).ready(function(){
    $('.slider').slick({
        infinite: true,
        slidesToShow: 1,
        initialSlide: 0,
        swipe: false,
        infinite: false,
        prevArrow: '<div class="prev" id="but_back"><svg  viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.704 6.6C4.208 5.576 3.744 4.808 3.312 4.296H17.304V3.288H3.312C3.744 2.776 4.208 2.008 4.704 0.983999H3.864C2.856 2.152 1.8 3.016 0.696 3.576V4.008C1.8 4.552 2.856 5.416 3.864 6.6H4.704Z"/></svg></div>',
        nextArrow: '<div class="next label-1">Next</div>',
    });
    let buttonPrev = document.querySelector('.prev');
    console.log(buttonPrev)
});

let button = document.querySelector('.send_message');
let slideItem = document.querySelectorAll('.slider_item');
let index;



$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    index = nextSlide + 1;
    document.getElementById('fraction').innerHTML = index;
    let buttonPrev = document.querySelector('.prev');
    
    if(nextSlide > 0){
        buttonPrev.style.opacity = '1';
    } else
        buttonPrev.style.opacity = '0';
    if(nextSlide > 1){
        button.style.opacity = '1';
        button.style.zIndex = '15';
    } else
        button.style.zIndex = '-1';
})

БЛОГ НА HUSL

Есть цикл, чтобы по клику выезжал следующий input, у меня их 3, но клик работает только 1 раз

Ответы (1 шт):