title: Adding input rows using jQuery clone()
body: <h2>Background:</h2>
  <p>I've got a set of input elements form invoice item details. I want a user to be able to add rows of input fields for each additional item.</p>
  <h3>Input Markup</h3>
  <pre><code>&lt;div class=&quot;input-row&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;item_name&quot;&gt;Item:&lt;/label&gt;
          &lt;div&gt;
              &lt;input type=&quot;text&quot; name=&quot;item_name[]&quot; placeholder=&quot;Name&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type=&quot;text&quot; name=&quot;item_qty[]&quot; placeholder=&quot;Quantity&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type=&quot;text&quot; name=&quot;item_price[]&quot; placeholder=&quot;Price&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type=&quot;text&quot; name=&quot;item_total[]&quot; placeholder=&quot;Total&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And a button to add an additional item</p>
  <h3>Button Markup</h3>
  <pre><code>&lt;div class=&quot;col-lg-2&quot;&gt;
      &lt;a id=&quot;add-item&quot; href=&quot;#&quot;&gt;Add Item&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>Button Javascript</h3>
  <pre><code>$('#add-item').click(function(){
      $('.input-row:first').clone().appendTo('.input-row:last');
  })
  </code></pre>
  <h2>Problem:</h2>
  <p>When I click the <code>add</code> button the first time, it works fine and adds a row of input fields after the first one, however if I click it again it adds 2 rows and then click it again it adds 4 rows. I realise this may be because the cloned <code>.input-row</code> div is being included in the clone, but I'm trying to only copy the first div element using the <code>:first</code> selector. Any ideas how to resolve this?</p>
  <h3>Question</h3>
  <p>How can I ensure only one <code>div</code> is appended to the markup.</p>