Create Input Field on click at specific position

I got a form where I want to dynamically add input fields, if the users clicks on a "add more" button. At the moment it works to create the buttons on click, but the buttons do no get created at the position where I want them to be. Here is my HTML Code Snippet:

window.addEventListener("load", function() {
  var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
  addMoreButtons.forEach(function(button) {
    button.addEventListener("click", function() {
      console.log(button);
      // Create a div
      var div = document.createElement("div");

      // Create a text input
      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "More");
      text.setAttribute("placeholder", "Weitere hinzufügen");

      // add the file and text to the div
      div.appendChild(text);

      //Append the div to the container div
      document.querySelector(".buttonTest").appendChild(div);
    });
  });
});

<div class="user-details">
  <div class="input-box">
    <span class="details">Stärken</span>
    <input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more1">+ Weitere 
                    hinzufügen</button>
    </div>
  </div>
  <div class="input-box">
    <span class="details">Technische Fähigkeiten</span>
    <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
    </div>
  </div>
</div>

Now every time when the first (#add-more1) or second (#add-more2) button is clicked, the input field gets created below the first button. But I want the input fields to appear where the button was clicked. For example: If the first button is clicked I want the input field to be created below the first button. And if the second button is clicked I want the input field to be created below the second button and not below the first button.

Thanks for your help! :)

Solution

You need to use parentElement

https://www.w3schools.com/jsref/prop_node_parentelement.asp

Example:

window.addEventListener("load", function() {
  var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
  addMoreButtons.forEach(function(button){
    button.addEventListener("click", function() {
        console.log(button);
      // Create a div
      var div = document.createElement("div");
  
      // Create a text input
      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "More"); 
      text.setAttribute("placeholder", "Weitere hinzufügen");
  
      // add the file and text to the div
      div.appendChild(text);
  
      //Append the div to the container div
      button.parentElement.appendChild(div);
    });
  });
});

<div class="user-details">
            <div class="input-box">
                <span class="details">Stärken</span>
                <input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
                <div class="buttonTest">
                    <button type="button" class="add-more" id="add-more1">+ Weitere 
                    hinzufügen</button>
                </div>
            </div>
            <div class="input-box">
                <span class="details">Technische Fähigkeiten</span>
                <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
                <div class="buttonTest">
                    <button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
                </div>
            </div>
         </div>