When a user inputs a value, how can I create multiple elements at the same time using JavaScript?

I'm planning to auto-generate multiple user input boxes.

Example:

If the user inputs 10, auto-generate 3 input fields at each time. So the user gets 30 input fields.

I'm trying to find a solution all day long but it still doesn't work for me.
Before I looped this code it worked.
After I looped it it's no longer working.

This is what I got before looping. CSS was pre-linked that's why it's aligned at one line.

// Get the input value only once
const inputValue = document.querySelector(".inputBox").value;

// Define the function outside of the loop
function btnClick(){
   
  /// Loop until the input value is reached
  let i = 0;
  while (i < inputValue) {
    // Create a new div element
    const divElement = document.createElement("div");
    const sp2 = document.querySelector(".page");
    const parentdiv = sp2.parentNode;
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    //Adding class to new div element
    document.querySelectorAll("div")[2].classList.add("calBox");
    
    const length = "<p class='first'> Length : <input type='text' class='second' value='' /> </p>";
    const height = "<p class='first'> Height : <input type='text' class='second' value='' /> </p>";
    const width =  "<p class='first'> Width : <input type='text' class='second' value='' /> </p>";
    const first = document.querySelector(".calBox");
    const second = length + height + width +"<br />";

    first.innerHTML = second ;
    i++;
   
  }
}

This is a use case for the document fragment interface.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let button = document.querySelector("button");
button.addEventListener("click",function(e){
  let quantity = parseInt(document.querySelector("#qty").value);
  if(quantity >= 0) {
    let fragment = new DocumentFragment();
    while( quantity-- ) {
      let input = document.createElement("input");
      fragment.append(input);
    }
    document.body.append(fragment);
  }
  
});

<!-- language: lang-html -->

<input type-text id=qty><button>enter

<!-- end snippet -->

    const button = document.querySelector(".btn");
    const buttonRest = document.querySelector(".reset");
    
    button.addEventListener("click",function(e){
      let quantity = parseInt(document.querySelector("#myNumber").value);  //Declare input
      if(quantity >= 0) {
    
          for (var i=1; quantity>=i ; i++){
    
        var length = "<p class='first'>"+ i +". Length : <input type='number' class='second"+i+"' value='' /> </p>";
        var height = "<p class='first'> Height : <input type='number' class='second"+i+"' value='' /> </p>";
        var width =  "<p class='first'> Width : <input type='number' class='second"+i+"' value='' /> </p>";
          
        var inputTotal = length + height + width;
    
        document.querySelector(".calBox").innerHTML += inputTotal;
        }
        button.disabled=true;
      }
    });
    
      buttonRest.addEventListener("click", function(){
        location.reload(true)
      });

Below are HTML code

      <p class="askCargoBox">Total Cargo Box : 
                <input type="number" id="myNumber" placeholder="Number"/> 
                <button class="btn"> Comfirm </button>
                <button class="reset"> Reset </button>
            </p>

This's a solution what i was done for and thanks for @Ronnie Royston
I figure out by his code replicate and thinking my own ways .
I hope this article will help other guy too.

now i need to think about calculation process about this so
hope u guys happy coding