Link jQuery Cloner
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-cloner/dist/jquery-cloner.min.js"></script>
Write the Markup (this is using default classes used by jQuery Cloner)
<div class="clonable-block" data-toggle="cloner">
<div class="clonable">
<label>Attributes</label>
<input type="text" name="attr[]">
<button type="button" class="clonable-close-button">Delete</button>
<br>
<br>
</div>
<br>
<button type="button" class="clonable-button-add">Add Attributes</button>
</div>
Note: The data-toggle="cloner"
is the default attribute to initialize the plugin
$('.my-clonable').clonable({
clonableContainer: '.clonable-block',
clonable: '.clonable',
addButton: '.clonable-button-add',
closeButton: '.clonable-button-close',
repeatableContainer: '.repeatable-block',
repeatable: '.repeatable',
addButton: '.repeatable-button-add',
closeButton: '.repeatable-close-button',
focusableElement: 'input:first',
clearValueOnClone: true,
debug: false,
beforeToggle: function (clone, index, self) {},
afterToggle: function (clone, index, self) {}
});