Javascript-форум - Перенос родительского элемента вместе с дочерним при клике

Есть код который при клике открывает все элементы родительского класса в специальном Div-е. все приходит с базы.
function OpenFoodList(param){
$.ajax(
{type: 'POST', url:'/MobileRestaran/rzSoap.php', data: {fname:'OpenFoodList', cod:param},
success: function(arg){
theRes = JSON.parse(arg);
if (theRes[0][0]=='empty') {}
else{
resStr = '<table id="OpenMenuFood" border="1" align="center" width="330px" height= "50px">';
for(var i=0; i<theRes.length -1; i++) {
cod = theRes[i][0];
name = theRes[i][1];
resStr = resStr+''+
' <tr>'+
' <td><button class = "menu" onclick="AddFood(\''+cod+'\', \''+name+'\')" align="left" style="font-family:\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif; height:35px; width:100%; cursor: pointer; font-weight:bold">'+
' '+name+''+
' </button>'+
' </td>'+
' </tr>';
}
resStr = resStr+'</table>';
document.getElementById("FoodList").innerHTML = resStr;
}
}
});
}

Сам Div накладывается на таблицу.

function OpenMenuAddTable(){
document.getElementById("MenuAddDiv").innerHTML = '<table border="1" id = "MAINTABLEWITHDIV" style = "width:900px; height:500px; margin-top:-320px">'+
' <tr>'+
' <td width = "350">'+
' <div id = "RaboblMainDiv" style= "width:100%px; background-color:green; overflow-y:scroll;'+
'height:100%">'+
'<table border = "0" width = "100%" id = "FoodList">'+
' <tr>'+
' <td >'+
' </td>'+
' </tr>'+
'</table>'+
' </td>'+
' <td id = "SecTableCell">'+
'<div style= "width:100%; height:100%; overflow-y:scroll; direction:ltr; background-color:red" id = "AddNewMenu" >'+
' <table border = "1" width = "100%" id = "AddNewTable">'+
' <tr>'+
' <td width = "34">'+
' </td>'+
' <td style="font-family:\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif; width:283px; font-weight:bold">'+
' <b>Наименование'+
' </td>'+
' <td align = "center" style="font-family:\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif; width:100px; font-weight:bold">'+
' <b>Ед.Изм'+
' </td>'+
' <td align = "center" style="font-family:\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif; width:100px; font-weight:bold">'+
' <b>Цена'+
' </td>'+
' </tr>'+
' </table>'+
'</div>'
' </td>'+
' </tr>'+
'</table>';

document.getElementById("AddNewMenu").scrollTop = 99999;
}

И есть функция которая при клике на дочерний элемент, передает выбранный элемент в другой Div.

function AddFood (paramcod, paramname){

strEdIzm = '';
for(i = 0; i<listEdIzm.length; i++){
strEdIzm = strEdIzm + '<option>' +listEdIzm[i]+ '</option>';
}
document.getElementById("AddNewTable").innerHTML = document.getElementById("AddNewTable").innerHTML + '<tr id="StrCheck'+paramcod+'">'+
' <td width = "20" height = "20">'+
' <img src = "img/exitNew.png" style = "width:30px; height:30px; cursor:pointer" onclick = "DeletePos(\''+paramcod+'\')">'+
' </td>'+
' <td width = "800px"> '+paramname+' </td>'+
' <td style = "width:100px">'+
' <select id = "EdIzm" style="width:100px; background-color:white; cursor: pointer">'+strEdIzm+'</select>'+
' </td>'+
' <td style = "width:100px">'+
' <input type = "text" style="width:100px; cursor: pointer"> </input>'+
' </td>'+
' </tr>';

str = str +'</table>';
document.getElementById("AddNewTable").scrollTop = 99999;
}

Вопрос: как сделать так, чтобы при клике на дочерний Div элемент записывался в другой Div, НО с родительским элементом?

Примерно надо сделать так:
* Toyota
-Rav4
-Corolla
-Camry
* Subaru
-Forester
-Impreza
-Legacy
* Audi
-A6
-A4
и т.д

надеюсь доступно пояснил свою проблему))