<html>
<head>
<title></title>
<style type="text/css">
div.ex1
{
width:100px;
padding:20px;
border:1px solid gray;
margin:0px;
}
div.ex2
{
width:100px;
padding:20px;
border:1px solid gray;
margin:0px;
}
</style>
<script type="text/javascript">
var id = 1;
function mirror() {
var checkboxID = 'checkID' + id;
var spanID = 'Span' + id;
alert(checkboxID);
var data = document.getElementById("theDiv");
document.getElementById("theDiv").innerHTML = " " + data.innerHTML + ' <span id=' + spanID + ' onchange=check("' + spanID + '")> <input id="' + checkboxID + '" type="checkbox" /> ' + document.getElementById("txtarea").value + "<br> </span>";
id++;
}
function check(targ) {
alert(targ);
var element = document.getElementById(targ);
alert(element.innerHTML);
document.getElementById("div1").innerHTML += '<span id=' + targ + ' >' + element.innerHTML + '</span>';
element.parentNode.removeChild(element);
}
</script>
</head>
<body>
<br />
<table><tbody><tr>
<td>
<input name="txtarea" id="txtarea" type="text" />
</td>
<td>
<input type="button" name="Submit" value="Submit" onclick ="mirror()" />
</td></tr></tbody></table>
<br />
<table><tbody><tr>
<td>
<div id="theDiv" class="ex1">
</div>
<input type="button" name="submit" value="shift" /><br/>
<br/>
<div id="div1" class="ex2">
</div>
<input type="button" name="submit" value="remove" /><br/>
<br/><br/><br/></td>
<td>
</td>
</tr></tbody></table>
<input id="checkboxID" type="checkbox" onchange="check('checkboxID')" />
</body>
</html>