How to add div with input fields on onclick?

Question

css

Hello everyone, I can’t figure out how to add HTML code that is in the document itself by onclick.
Example, there are 3 fields, and 2 buttons, 1 button is to complete it; The 2nd one is to add a Traveler, and here's how to make it so that when I click on the 2nd button, I have the opportunity to add the same fields as I did with the main div?
And is it possible to create these div * s unique, so that you can then transfer information from them separately?
Here's what it looks like to me...

<div class="container">
       <div id="inputText">
         <button class="btn btn-info">Start Travel</button>
          <input class="form-control">
          <input class="form-control">
          <input class="form-control">
           <button onclick="f1()" class="btn btn-info">Add Traveler</button>
           <div id="out">
               
           </div>
       </div>
        
    </div>

function f1(){
   var but, out;   
  but = true;
   out = document.getElementById('out')
    
     if(but == true){
         out.innerHTML = "test"
    }
    else{
        out.innerHTML = "error"
    }
   
 }

Answer 1

<div class="container">
       <div id="inputText">
         <button class="btn btn-info">Start Travel</button>
          <input class="form-control">
          <input class="form-control">
          <input class="form-control">
           <button onclick="f1()" class="btn btn-info">Add Traveler</button>
           </div>
           <div id="out">
               
           </div>
   
    </div>

function f1(){
   
 var out = document.getElementById('out');
 var clonningEl = document.querySelector('#inputText').cloneNode(true);
out.appendChild(clonningEl);

 }