如何获取使用apend的div element

调试发现是第20行进去，elem = document.getElementById( match[ 2 ] )获取不到elem，得到的是null. 不知道这种动态添加的标签，应该如何正确获取的？
这里希望的是可以动态添加删除Box，然后每个Box里面可以动态添加删除Item.
还请大神们帮忙指导，感谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script language="javascript" type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var NewBoxCount = 1;
var NewItemCount = 1;
$(document).ready(function(){
function insertBox(){
var html = "<input type='button' class='add' value='新生成Box"+NewBoxCount+"' />";
html += "<div id='Itemnode"+NewBoxCount+"'>";
html += "<input type='button' id='additem' class='additem' value='增加item' />";
html += "</div>";
console.log(html);
$("#Boxnode").append(html);
$("#Itemnode"+NewBoxCount).on("click",".additem",function(){
var html2 = "<input type='button' id='additem' class='additem' value='新生成的Item"+NewItemCount+"' />";
console.log(html2);
$("#Itemnode"+NewBoxCount).append(html2);
NewItemCount++;
});

}
function insertItem(){
var html2 = "<input type='button' id='additem' class='additem' value='新生成的Item"+NewItemCount+"' />";
$("#Itemnode").append(html2);
}
$("#Boxnode").on("click",".add",function(){
insertBox();
NewBoxCount++;
});
$("#Itemnode").on("click",".additem",function(){
insertItem();
NewItemCount++;
});
});
</script>
</head>
<body> 
<form action="" method="post" name="f1">
<div id="Boxnode">
<input type="button" id="add" class="add" value="增加Box" />
<div id="Itemnode">
<input type="button" id="additem" class="additem" value="增加item" />
</div>
</div>
</form>
</body>
</html>