Пишу "todo list". Столкнулся с проблемой: когда есть две и больше панели задач, при нажатии "add" элементы списка задач присваиваются к самой первой панели. Что нужно для того, чтоб при нажатии "add" каждый элемент списка присваивался к своей панели?
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title> todo lists </title>
</head>
<body id = "insert">
<button id="btn" onclick="create()">Create new</button>
<div id="second"></div>
[JS]<script type="text/javascript">
function create(){
var newDiv = document.createElement('div');
newDiv.innerHTML = '<div id="panel-1"><input id="input"><button id ="button-1" onclick="add()"> add! </button></input></div>';
document.getElementById("insert").appendChild(newDiv);
}
function add(){
var newDiv2= document.createElement('div');
newDiv2.innerHTML = '<div id="body"><div id="footer"></div></div>';
document.getElementById("panel-1").parentNode.appendChild(newDiv2);
}
</script>[/JS]
</body>
</html>
P.S.
Для детализации прикрепил миниатюру.