Does anyone know why my multi-phase form won't work?

I am making a multi-phase form but it is not acting normal I have written a lot of diffrent code for it but don't know why it is not working the way I want it It has been two days working with it I am feeling stupid now here is the code HTML:

<div id="form-container">

      <div id="phase-1">
          <h3>Phase 01</h3>
          <form>

              <input id="fname" type="text" placeholder="First name">


              <input id="lname" type="text" placeholder="Last name">


              <input id="email" type="text" placeholder="Email">

              <button id="phase-1-btn">Next</button>

          </form>

      </div>

      <div id="phase-2">

          <h3>Phase 02</h3>
          <form>

              <input id="pass"  type="text" placeholder="Password">


              <input id="cpass" type="text" placeholder="Confirm Password">


              <button id="phase-2-btn">Next</button>

          </form>

      </div>

      <div id="phase-3">

          <h2>Thank You for Testing my pen</h2>

      </div>

  </div>

CSS :

#form-container{
height: 350px;
width: 300px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
background-color: #95a5a6;
font-family: "Slabo 27px";
position: relative;
box-shadow: 1px 1px 2px,
    -1px -1px 2px;
}

#phase-1, #phase-2{
height: 100%;
width: 100%;
border-top: 3px solid #f39c12;
display: block;
}

#phase-1 h3, #phase-2 h3{
height: 10%;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 23px;
color: #fff;
}

#phase-1 form, #phase-2 form{
display: block;
height: 75%;
padding: 0;
padding-top: 15px;
margin: 0;
}

input{
display: block;
width: 80%;
margin-top: 10px;
margin-left: auto; 
margin-right: auto; 
padding: 10px 20px;
border: none;
border-radius: 5px;
}

button {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 10px 5px;
background-color: #f39c12;
color: #fff;
font-weight: 600;
border: none;
border-radius: 6px;
}

#phase-2{
display: none;
}

#phase-3{
display: none;
height: 0;
width: 100%;
color: #000;
position: absolute;
top: 0;
left: 0;
background: #f39c12
}

#phase-3 h2{
width: 200px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 135px;
text-align: center;
}

JS :

var fname, lname, email, pass, cpass;

function id( id ) {
    return document.getElementById(id);
}


function phase1 () {
fname = id("fname").value;
lname = id("lname").value;
email = id("email").value;


if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
    id("phase-1").style.display = "none";
    id("phase-2").style.display = "block";
    // end of if
} else {
    alert("Please fill the Form");
}

} // end of phase1 function


// add the event to the phase-1-btn 
id("phase-1-btn").addEventListener("click", phase1());


/* phase 02 */

function phase2 () {
pass = id("pass").value;
cpass = id("cpass").value;

if ( pass.length > 2 && cpass.length > 2 ) {
    id("phase-2").style.display = "none";
    id("phase-3").style.display = "block";
    id("phase-3").style.height = "100%";
    // end of if
} else {
    alert("Please fill the Form");
}

} // end of phase2 function
id("phase-2-btn").addEventListener("click", phase2());

Let's try this one. Then tell me what you see in the console.

<script>

    function phase1()
    {
        window.console.log('phase1 function called');

        var fname_val = document.getElementById('fname').value;
        var lname_val = document.getElementById('lname').value;
        var email_val = document.getElementById('email').value;

        // verify values
        window.console.log('fname_val='+fname_val + ' lname_val='+lname_val + ' email_val='+email_val);

        if( fname_val.length > 2 && lname_val.length > 2 && email_val.length > 2 )
        {
            window.console.log('validation!! :)');

            document.getElementById("phase-1").style.display = "none";
            document.getElementById("phase-2").style.display = "block";
        }
        else
        {
            alert("Please fill the Form");
        }
    }


    function phase2()
    {
        window.console.log('phase2 function called');
    }


    document.addEventListener("DOMContentLoaded", function(event) {
        window.console.log("DOM fully loaded and parsed");
        document.getElementById("phase-1-btn").addEventListener("click", phase1);
        document.getElementById("phase-2-btn").addEventListener("click", phase2);
    });

</script>


<div id="phase-1">
    <h3>Phase 01</h3>
    <input id="fname" type="text" placeholder="First name" />
    <input id="lname" type="text" placeholder="Last name" />
    <input id="email" type="text" placeholder="Email" />
    <input type="button" id="phase-1-btn" value="Next" />
</div>


<div id="phase-2">
    <h3>Phase 02</h3>
    <input id="pass"  type="text" placeholder="Password" />
    <input id="cpass" type="text" placeholder="Confirm Password" />
    <input type="button" id="phase-2-btn" value="Next" />
</div>

<div id="phase-3">
    <h2>Thank You for Testing my pen</h2>
</div>