title: Adding, duplicating and removing elements with jQuery
body: <p>So basically, I have been trying to writing some jQuery that will add and duplicate a row of inputs on click, everything is working perfectly except for this.</p>
  
  <p>Illustration of problem:</p>
  
  <p><img src="https://i.stack.imgur.com/3rgnn.png" alt="enter image description here"></p>
  
  <p>When you hit the remove button it leaves the 'Add Field' button beneath, I would like it to move back up into the row as shown above.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;form action="javascript:void(0);" method="POST" autocomplete="off"&gt;
      &lt;input type="submit" value="Submit"&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="bigjane"&gt;
          &lt;button class="add"&gt;Add Field&lt;/button&gt;&lt;input type="text" name="input_0" placeholder="Input1"&gt;&lt;input type="text" name="input_0" placeholder="Input2"&gt;&lt;input type="text" name="input_0" placeholder="Input3"&gt;&lt;input type="button" class="duplicate" value="duplicate"&gt;&lt;input type="button" class="remove" value="remove"&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(document).ready(function () {
  'use strict';
  var input = 1,
      button = ("&lt;button class='add'&gt;Add Field&lt;/button&gt;");
  
  $('.add').click(function () {
      $(this).clone(true).appendTo('form');
      $(this).remove();
      $('form').append('&lt;input type="text" name="input_' + (input) + '"placeholder="Input1"&gt;');
      $('form').append('&lt;input type="text" name="input_' + (input) + '"placeholder="Input2"&gt;');
      $('form').append('&lt;input type="text" name="input_' + (input) + '"placeholder="Input3"&gt;&lt;input type="button" class="duplicate" value="duplicate"&gt;&lt;input type="button" class="remove" value="remove"&gt;&lt;br&gt;');
      input = input + 1;
  });
  
  $('form').on('click', '.remove', function () {
      $(this).prev('input').remove();
      $(this).prev('input').remove();
      $(this).prev('input').remove();
      $(this).prev('input').remove();
      $(this).next('br').remove();
      $(this).remove();
      input = input - 1;
  });
  
  $('form').on('click', '.duplicate', function () {
      $('.add').attr('id', 'add');
      $('#add').removeClass().appendTo('form');
      $(this).prev().prev().prev('input').clone().appendTo('form');
      $(this).prev().prev('input').clone().appendTo('form');
      $(this).prev('input').clone().appendTo('form');
      $('form').append('&lt;input type="button" class="duplicate" value="duplicate"&gt;&lt;input type="button" class="remove" value="remove"&gt;&lt;br&gt;');
      input = input + 1;
  });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mah0nqz0/" rel="noreferrer">JSFiddle Example</a></p>
  
  <p>I have a feeling the answer for this is going to be somewhat simple, thanks in advance!</p>