.clone() and .remove() method in jquery

HTML 

<div class="wrapper">
  <div class="element">
  </div>
  <div class="results"></div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>


CSS

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.buttons {
  clear: both;
  margin-top: 10px;
}

JAVASCRIPT

$(document).ready(function() {

$('.wrapper').on('click', '.remove', function() {
  $('.remove').closest('.wrapper').find('.element').not(':first').last().remove();
});
$('.wrapper').on('click', '.clone', function() {
  $('.clone').closest('.wrapper').find('.element').first().clone().appendTo('.results');
});

})

DEMO LINK

https://codepen.io/esedic/pen/OgPRwV