JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="duplicate">Duplicate</div>

<div class="section" contenteditable>
  <div class="sectTitle">
    <span class="leader">1.</span>
    <span class="common">Main Title</span>
    <span class="ender">(2)</span>
  </div>
  <div class="style1">Level 2 Title</div>
  <div class="style1">Level 2 Title</div>
</div>

CSS

body {
  font-family: Segoe UI;
}

.section {
  width: 500px;
  margin-bottom: 25px;
}

.sectTitle {
  font-weight: 500;
}

.style1 {
  padding-left: 15px;
}

.ender {
  float: right;
}

.duplicate {
  background: #454545;
  color: #fff;
  width: 150px;
  text-align: center;
  height: 32px;
  line-height: 30px;
  margin: 10px;
}

JavaScript

$('.duplicate').on('click', function(){

  
 	$('.section').clone().appendTo('body');
 })