title: Remove button only on recently added input field using clone()
body: <p>HTML :</p>
  
  <pre><code>&lt;form role="form" action="/wohoo" method="POST"&gt;
   &lt;label&gt;Stuff&lt;/label&gt;
     &lt;div class="multi-field-wrapper"&gt;
       &lt;div class="multi-fields"&gt;
         &lt;div class="multi-field"&gt;
           &lt;input type="text" name="stuff[]"&gt;
           &lt;button type="button" class="remove-field"&gt;Remove&lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;button type="button" class="add-field"&gt;Add field&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);
  $(".add-field", $(this)).click(function(e) {
      $('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
      $('.multi-field .remove-field', $wrapper).show();
  });
  $('.multi-field .remove-field', $wrapper).click(function() {
      if ($('.multi-field', $wrapper).length &gt; 1) {
          $(this).parent('.multi-field').remove();
      }
      adjustButtonVisiblity();
  });
  
  adjustButtonVisiblity();
  function adjustButtonVisiblity() {
      if ($('.multi-field', $wrapper).length == 1) {
            $('.multi-field .remove-field', $wrapper).hide();
      }
    }
  });
  </code></pre>
  
  <p>I have html page which contains an div with input field. The div also contains an add button which clones the current input field and append it to the div so that i can have as many input fields as per user needs. I am also having a remove button next to the input field but the problem is i only need remove button on the last added input field to the div. 
  Any help is appreciated.  </p>