How to duplicate the input fields and place them at the right half of the page?

The vertical input fields that exist on the left half of the page should duplicate on click and be placed on the right half of the page when clicking on the button ‘plus’. I tried different ways and the code works in the online compiler but in VS Code where is my project it doesn’t work!

HTML

<div id="inputs" class="short">
        <input id="input1" class="input" placeholder=" Add label..." type="text">
        <hr class="hr1">
        <input id="input2" class="placeholder" placeholder=" Add placeholder..." type="text">
        <button class="btn btn-delete">
          <i class="fas fa-trash-alt"></i>
        </button>
        <button onclick="duplicate()" class="button1">
          <i class="fa fa-plus"></i>
        </button>
      </div>
     
      <div id="duplicatedInputs"></div>



JavaScript

var counter = 1;


function duplicate() {
  // Get the input fields container
  var inputContainer = document.getElementById("inputs");


  // Get the input fields to duplicate
  var input1 = document.getElementById("input1");
  var input2 = document.getElementById("input2");


  // Clone the input fields
  var clonedInput1 = input1.cloneNode(true);
  var clonedInput2 = input2.cloneNode(true);


  // Generate unique IDs for the cloned input fields
  clonedInput1.id = "input1-" + counter;
  clonedInput2.id = "input2-" + counter;
  counter++;


  // Append the cloned input fields to the duplicated inputs container
  var duplicatedInputsContainer = document.getElementById("duplicatedInputs");
  duplicatedInputsContainer.appendChild(clonedInput1);
  duplicatedInputsContainer.appendChild(clonedInput2);
}