jsのclone()とCSSのcounter-incrementを合わせて使ったときの振る舞いの確認です。clone()は要素の複製を作成します。counter-incrementは要素の連番を自動で振ってくれます。

サンプルは、class名「count-m」を付けたdiv要素、（以下、親要素と呼称）が、4つの子要素（div）を内蔵し、この子要素にcounter-incrementで連番をふっています。

この4つの子要素は、それぞれ個別にクリックすると、自身を複製して親要素内に追加します。そのとき、連番もインクリメントされます。追加は何度でも行えますが、複製したものをクリックしても再複製はありません。また、「全体を複製」ボタンをクリックすると、4つの子要素を親要素ごと複製します。その後、元の子要素クリックで個別に複製ができますが、この複製のとき、全体が複製された側も複製が追加されます。先に子要素ごとに複製し、その後全体を複製すると、そのときの状態がそのまま複製されます。いずれも連番の重複はありません。

なお、分かりやすくするため、全体複製の場合のみ、10pxのmarginを空けています。

サンプル

サンプルの構造（htmlソース）

<div id="wrapper">
	<button id="btn">全体を複製</button>
	<div class="count-m">
		<div>サンプルテキストA・サンプルテキストA・サンプルテキストA</div>
		<div>サンプルテキストB・サンプルテキストB・サンプルテキストB</div>
		<div>サンプルテキストC・サンプルテキストC・サンプルテキストC</div>
		<div>サンプルテキストD・サンプルテキストD・サンプルテキストD</div>
	</div>
</div>

サンプルのCSSソース

body {
	counter-reset: num-m 0;
	}
#wrapper {
	width:90%;
	margin: 10px auto;
	text-align:left;	
	}
.count-m {
	width:100%;
	margin: 10px auto;
	}
.count-m div:before {
	counter-increment: num-m 1;
	content: "div要素　" counter(num-m) "番目 ";
	}

サンプルのScriptソース

$(function(){
	$("#btn").on('click', function(){
		$(".count-m").clone().appendTo("#wrapper");
	});
	$(".count-m div").on('click', function(){
		$(this).clone().appendTo(".count-m");
	});
});