FND/testcase.html

## testcase.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Test Case</title>
	<style>
		#notify {
			border: 1px solid #318210;
			padding: 5px;
			background-color: #C0FAB4;
		}
	</style>
</head>

<body>
	<a href="javascript:;" id="recheck">re-check</a>
	<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&amp;&amp;F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Firebug Lite</a>

	<h1>Instructions</h1>
	<ol>
		<li>
			click <em>Add Note</em>; observe the notification box reporting the
			expected values for the newly created <code>textarea</code>'s
			<code>id</code> and <code>name</code> attributes
		</li>
		<li>
			repeat the previous step three times
		</li>
		<li>
			click <em>re-check</em> to check the values for the third note,
			independent of the dynamic-creation process - note that the
			notification box now reports the expected <code>id</code>, but the
			<code>name</code> attribute uses an unexpected index; that of the
			very last note element
		</li>
		<li>
			repeat the first step
		</li>
		<li>
			repeat the third step, observing the same erroneous behavior
		</li>
		<li>
			activate <em>Firebug Lite</em> to inspect the DOM, confirming that
			the <code>name</code> attribute of all <code>textarea</code>s is
			identical
		</li>
	</ol>

	<p id="notify"></p>

	<form action="#" method="get">
		<fieldset>
			<legend>My Notes</legend>
			<ol>
				<li>
					<textarea name="foo0bar" id="foo0bar"></textarea>
				</li>
			</ol>
			<input type="button" value="Add Note">
		</fieldset>
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
	<script>
(function($) {

var noteCount = $("fieldset li").length;

var debug = function(args) {
	var msg = Array.prototype.join.call(arguments, " || ");
	$("#notify").text(msg);
};

var addNote = function(ev) {
	var container = $(this).closest("fieldset");
	var template = $("ol li:last-child", container);

	noteCount++;
	var id = "foo" + (noteCount - 1) + "bar";

	var clone = template.clone(true, true);
	clone.find("textarea").val("").attr("id", id).attr("name", id);

	$("ol", container).append(clone);

	var el = $("ol li:last-child textarea", container);
	debug("#" + noteCount, el.attr("id"), el.attr("name"));

	return false;
};

$(document).ready(function($) {
	$("input").click(addNote);
	$("#recheck").click(function(ev) {
		var el = $("ol li textarea").eq(2);
		debug("3rd note", el.attr("id"), el.attr("name"));
	});
});

})(jQuery);
	</script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Test Case</title>
	<style>
	#notify {
	border: 1px solid #318210;
	padding: 5px;
	background-color: #C0FAB4;
	}
	</style>
	</head>

	<body>
	<a href="javascript:;" id="recheck">re-check</a>
	<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]\|\|F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Firebug Lite</a>

	<h1>Instructions</h1>
	<ol>
	<li>
	click <em>Add Note</em>; observe the notification box reporting the
	expected values for the newly created <code>textarea</code>'s
	<code>id</code> and <code>name</code> attributes
	</li>
	<li>
	repeat the previous step three times
	</li>
	<li>
	click <em>re-check</em> to check the values for the third note,
	independent of the dynamic-creation process - note that the
	notification box now reports the expected <code>id</code>, but the
	<code>name</code> attribute uses an unexpected index; that of the
	very last note element
	</li>
	<li>
	repeat the first step
	</li>
	<li>
	repeat the third step, observing the same erroneous behavior
	</li>
	<li>
	activate <em>Firebug Lite</em> to inspect the DOM, confirming that
	the <code>name</code> attribute of all <code>textarea</code>s is
	identical
	</li>
	</ol>

	<p id="notify"></p>

	<form action="#" method="get">
	<fieldset>
	<legend>My Notes</legend>
	<ol>
	<li>
	<textarea name="foo0bar" id="foo0bar"></textarea>
	</li>
	</ol>
	<input type="button" value="Add Note">
	</fieldset>
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
	<script>
	(function($) {

	var noteCount = $("fieldset li").length;

	var debug = function(args) {
	var msg = Array.prototype.join.call(arguments, " \|\| ");
	$("#notify").text(msg);
	};

	var addNote = function(ev) {
	var container = $(this).closest("fieldset");
	var template = $("ol li:last-child", container);

	noteCount++;
	var id = "foo" + (noteCount - 1) + "bar";

	var clone = template.clone(true, true);
	clone.find("textarea").val("").attr("id", id).attr("name", id);

	$("ol", container).append(clone);

	var el = $("ol li:last-child textarea", container);
	debug("#" + noteCount, el.attr("id"), el.attr("name"));

	return false;
	};

	$(document).ready(function($) {
	$("input").click(addNote);
	$("#recheck").click(function(ev) {
	var el = $("ol li textarea").eq(2);
	debug("3rd note", el.attr("id"), el.attr("name"));
	});
	});

	})(jQuery);
	</script>
	</body>

	</html>