jQuery Clone/Delete element

jQuery Clone/Delete element

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="copy-delete">
  I am a div that can be copied 1
</div>

<div class="">
  I am a div that can not be copied 2
</div>
<div class="copy-delete">
  I am a div that can be copied 3
</div>
<div class="copy-delete">
  I am a div that can be copied 4
</div>
<div class="">
  I am a div that can not be copied 5
</div>

CSS

.copy-delete {
  border: thin solid #000;
  margin: 1rem 2rem;
  padding: 1rem;
  position: relative;
}
.actn-btn {
  background-color: #fff;
  display: none;
  position: absolute;
  top: -10px;
  right: 0;
  color: red;
  font-size: 1rem;
  cursor: pointer;
}
.actn-btn:nth-child(2) {
  right: 20px;
}
.copy-delete:hover {
  border: thin solid red;
}


.copy-delete:hover > .actn-btn {
  display: inline-block;
}

JavaScript

let markup = `
	<span class="copy-ele actn-btn"><i class="fa fa-clone" aria-hidden="true"></i></span>
	<span class="actn-btn"><i class="fa fa-trash" aria-hidden="true"></i></span>
  `;
$('.copy-delete').prepend(markup);

$('body').on('click', '.actn-btn', function() {
		let $this = $(this);
		if($this.hasClass('copy-ele')) {
      $this.parents('.copy-delete').after($this.parents('.copy-delete').clone(true).fadeIn().fadeOut().fadeIn());
    } else {
    	$this.parents('.copy-delete').slideUp("normal", function() { $(this).remove(); } );
    }
});