Function performance within an if statement not working

I have some if statements within a function. If the if statements are true then they should preform a function. I want the functions to hide or show the the inputs in the easyAssignments div, depending on what the user inputs in numEAI. (Example: user inputs 3, only 3 input boxes will show) However when i click the enter button nothing appears to happen.

I originally tried to have the inputs in the easyAssignments div visibility be set to none and have the show input functions be set to block

What have I done wrong? I was also wondering what if it's correct to use the display property none in this case?

Link to code: https://jsfiddle.net/fzyx4dkc/2/

snippet of code:

 <div id ="numEA">
  <input min="0" max="5" type="number" id="numEAI">
  <button class="w3-button w3-red" onclick="showInputE()">Enter</button>
</div>


<div id="easyAssignments">
      <input type="text" id="easyA1">
      <input type="text" id="easyA2">
      <input type="text" id="easyA3">
      <input type="text" id="easyA4">
      <input type="text" id="easyA5">
</div>

<script>



  /* START of show input functions */

  function onlyShowInput1(){
      document.getElementById("easyA2").style.display = "none";
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }
  function onlyShowInput2(){
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }


  /* END of show input functions */

  function showInputE(){
  var numEAI = document.getElementById('numEAI');

    if (numEAI === 1){
        onlyShowInput1();
    } else if (numEAI === 2){
        onlyShowInput2();
      }

  }