I created a 3 form signup page for better css but now I having problem taking input and storing it into my database.

<div class="container">

    <form id="form1">
         <h2> Join Us </h2>
         <input type="text" placeholder="Username" name="username" required />
           <input type="text" placeholder="First Name" name="firstname" required />
           <input type="text" placeholder="Last Name" name="lastname" />
           <div class="btn"> 
           <button type="button" id="login"><a href="login.html"> Login </a></button>
            <button type="button" id="next1"> Next </button>
        </div>
    </form>
    
    <form id="form2">
            <h2> Create Password </h2>
            <input type="password" placeholder="Password" name="password" required />
            <input type="password" placeholder="Confirm Password" required />
       <div class="btn"> 
         <button type="button" id="back1"> Back </button>
         <button type="button" id="next2"> Next </button>
         </div>
    </form>
    
    <form id="form3">
       <h2> Complete Signup </h2>
       <input type="number" placeholder="Mobile number" name="number" required />
       <input type="email" placeholder="E-mail" name="mail" required />
       <div class="btn"> 
         <button type="button" id="back2"> Back </button>
         <button type="submit" id="submit"> Submit </button>
      </div>

</form>

Whenever I try to take input and store it, it only stores the data from last form. Is there any way I can take data from all three forms and store it?

Insert function js

submit.onclick = function submit() {
  form1.method = "post";
  form2.method = "post";
  form3.method = "post";
form3.action = "insert.php"
}