Как сделать так, что бы при нажатии на кнопку "продолжить" менялась форма регистрации

.form {position: relative; padding-bottom: 70px; width: 300px; -webkit-user-select: none;}

.radio {position: absolute; bottom: 0; width: 1rem; cursor: pointer;}
.radio:nth-of-type(1n) {left: 0rem;}
.radio:nth-of-type(2n) {left: 1rem;}
.radio:nth-of-type(3n) {left: 2rem;}

.tab-content {display: none; border: 1px solid black;}
.radio:checked+label+.tab-content {display: block;}

.label:before, .label:after {content: ""; position: absolute; left: 70px; bottom: 30px; width: 50px; height: 20px; border: 1px solid black; padding: 2px 4px; text-align: center; cursor: pointer;}
.label:before {left: 70px; display: none;}
.label:after {left: 0px; content: "Назад";}

.radio:nth-of-type(1n):checked~.label:nth-of-type(2n):before,
.radio:nth-of-type(2n):checked~.label:nth-of-type(3n):before {content:"Вперед"; display: block;}

.radio:nth-of-type(1n):checked~.label:nth-of-type(2n):after,
.radio:nth-of-type(1n):checked~.label:nth-of-type(3n):after {content:"";}
.radio:nth-of-type(3n):checked~.label:nth-of-type(3n):after,
.radio:nth-of-type(2n):checked~.label:nth-of-type(2n):after,
.radio:nth-of-type(2n):checked~.label:nth-of-type(3n):after,
.radio:nth-of-type(1n):checked~.label:nth-of-type(1n):after {display: none;}

<div class="form">
  <input type="radio" id="radio1" name="radio" class="radio" checked/>
  <label for="radio1" class="label"></label>
  <div class="tab-content">
    <p>Форма 1</p>
  </div>
  <input type="radio" id="radio2" name="radio" class="radio" />
  <label for="radio2" class="label"></label>
  <div class="tab-content">
    <p>Форма 2</p>
  </div>
  <input type="radio" id="radio3" name="radio" class="radio" />
  <label for="radio3" class="label"></label>
  <div class="tab-content">
    <p>Форма 3</p>
  </div>
</div>

const boxs = document.querySelectorAll(".box");
const nextBtn = document.querySelector(".btn-next");
const backBtn = document.querySelector(".btn-back");
const dots = document.querySelectorAll(".dots > input")

let activeBoxIdx = 0;

nextBtn.onclick = function(){
  clearActive();
  activeBoxIdx++;
  if(activeBoxIdx == boxs.length) activeBoxIdx = 0;
  boxs[activeBoxIdx].classList.add("box-active");
    dots[activeBoxIdx].checked = true;
  
}

 backBtn.onclick = function(){
  clearActive();
  activeBoxIdx--;
  if(activeBoxIdx <= -1 ) activeBoxIdx =  boxs.length - 1;
  boxs[activeBoxIdx].classList.add("box-active");
  dots[activeBoxIdx].checked = true;
  
}
for(const dot of dots){
  
  dot.onchange = (e)=>{
  clearActive();
  const idx = e.currentTarget.dataset.id;
  console.log(e.currentTarget)
  boxs[idx].classList.add("box-active");
  activeBoxIdx = idx;
  
  }
}

const clearActive = ()=>{
  
  boxs.forEach((e)=>{
      e.classList.remove("box-active");
   });
}

.box{
  display:none;
  width:200px;
  height:200px;
  background-color:#ccbbff;
  justify-content:center;
  align-items:center;
}

.box-active{
  display:flex;
}

<div class="container">
  <div class="box-container">
      <div class="box box-active">1</div>
      <div class="box">2</div>
     <div class="box">3</div>
  </div>
  <div class="ctrl-container">

    <div class="dots">
       <input type="radio" name="dot" checked class="dot"  data-id=0>
       <input type="radio"  name="dot" class="dot" data-id=1>
       <input type="radio"  name="dot" class="dot" data-id=2>
    </div>
    
    <button class="btn-back">back</button>
      <button class="btn-next">next</button>
  </div>


  
</div>