Stenli,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var ToC = '<nav role="navigation" class="table-of-contents">' + '<h1>On this page:</h1>' + '<ul>';
var newLine, el, title;
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
var div = $("<div>", {html : insertData});
$(':header', div).each(function (i,el) {
el = $(el);
var title = el.text();
el.attr('id' , title).html(title);
newLine = '<li>' + '<a href="#' + title + '">' + title + '</a>' + '</li>';
ToC += newLine;
});
ToC += '</ul>' + '</nav>' + div.html();
$('#pastArea').val(ToC);
});
});
</script>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40">
</textarea>
</div>
</form>
<br>
<input type="button" name="sendTo" value="Send to" id="sendTo">
<form name="pastForm" id="pastForm">
<div style="width:45%; float: right; margin: auto;">
<textarea name="pastArea" id="pastArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
</body>
</html>