Copy and Paste with jQuery

There are very easy steps to copy the target section/div/tag and paste anywhere you want following these steps: 1: Add attribute 'wt-paste' where you want to paste. 2: Add attribute 'wt-copy' whatever you want to copy and make it's children with attribute 'wt-dublicate' for add and delete copy. 3: Add attribute 'wt-more' in button for copy-paste section/div/tag when on clicked. 4: In any created attribute with 'wt-*' all the values will be the same e.g. if 'wt-paste="webicosoft"' so the value is "webicosoft" will be the same in all created attribues.

HTML

<!--
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
-->
<div wt-paste="div">
  <p> Paste Here --- </p>
</div>
<div wt-copy="div" style="display:none">
    <div wt-duplicate="div">
        Pakistan Zindah Baad
        <a href="javascript:;" wt-delete="div">delete</a>
    </div>
</div>
<button href="javascript:;" wt-more="div"> Add More Divs </button>
<!----------------------------------------->
<hr/>
<!----------------------------------------->
<p>Another method to copy-paste...</p>
<div wt-paste="field">
    <input type="text" placeholder="Name" /><hr/>
    <div wt-copy="field" style="display:none">
        <div wt-duplicate="field">
            <input type="text" placeholder="Name" />
            <a href="javascript:;" wt-delete="field">X</a>
            <hr/>
        </div>
    </div>
</div>
<button href="javascript:;" wt-more="field"> Add More Fields </button>

CSS

input {width:75%;padding:7px}
a {margin:5px;text-decoration:none}
button{border:1px solid;padding:5px;cursor:pointer}
/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/

JavaScript

$(document).ready(function() {
	$.fn.WT_COPY_PASTE = function($this) {
		var $copy = $('[wt-copy='+$this.attr('wt-more')+']');
		$('[wt-paste='+$this.attr('wt-more')+']').append($copy.html());
	};
	$(document).on('click', '[wt-more]', function() {
		$.fn.WT_COPY_PASTE($(this));
	});
	// DELETE COPY
	$.fn.WT_COPY_DELETE = function($this) {
		$this.parents('[wt-duplicate='+$this.attr('wt-delete')+']').remove();
	};
	$(document).on('click', '[wt-delete]', function() {
		$.fn.WT_COPY_DELETE($(this));
	});
});
/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/