title: How do I make each new input appear in a new box
body: <p>I want to know how to make it so that when the button is clicked and a new input is added, it does not take the place of the old one, but appears in a new bix leaving the old one.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="itemcreator" class="itm"&gt;
      &lt;form id="form1"&gt;
      &lt;!--where the user inputs the item--&gt;
      Item: &lt;input name="item" type="text" size="20"&gt;
      &lt;/form&gt;
  
      &lt;button onclick="outputname()"&gt;Add&lt;/button&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="box" id="duplicater"&gt; 
      &lt;p id="output"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  
  var i = 0;
  var original = document.getElementById('duplicater');
  </code></pre>
  
  <p>duplication function</p>
  
  <pre><code>function duplicate() {
  
  i = i + 1;
  var clone = original.cloneNode(true); 
  clone.id = "duplicetor" + ++i;  
  
  original.parentNode.appendChild(clone);
  }
  </code></pre>
  
  <p>function to output the item.</p>
  
  <pre><code>function outputname() {
  
  var x=document.getElementById("form1") ;
  item = x.elements.namedItem("item").value;
  if (item !== ""){
  document.getElementById("output").innerHTML=item;
  duplicater.style.display = "block";
  document.getElementById("addTrade").style.left = "7px";
  itemMkrWindow.style.display = "none";
  }
  } 
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.box {
  display: none;
  border-radius: 5px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  }
  </code></pre>
  
  <p></p>
  
  <p></p>