如何在JavaScript/HTML/CSS中处理具有跨距的关键字框

我试图构建一个可变数量的关键字框（关键字框的数量由php处理）。 为了更好地理解，我制作了三个硬编码的html关键字框。 最终结果应该是多个关键字框，可以处理多个关键字，并在每次输入后在单独的内部框中显示它们。如果我点击按钮，所有的关键词都会被提醒

我目前的尝试几乎成功了。您可以键入关键字，按enter键存储它们。 但内部关键字框仅在再次单击关键字框后显示

如果有人能帮我解决这个问题，我将不胜感激

let tags=[]；
让tagContainer=document.querySelectorAll（'.tagContainer'）；
tagContainer.forEach（函数（foo）{
foo.addEventListener（'click'，（e）=>{
//console.log（e.target.tagName）；
//如果（e.target.tagName=='I'）{
var tagLabel=e.target.getAttribute（'data-item'）；
var索引=标记。indexOf（标记标签）；
tags=[…tags.slice（0，索引），…tags.slice（索引+1）]；
foo.querySelectorAll（'.tag'）.forEach（tag=>{
tag.parentElement.removeChild（tag）；
});
tags.slice（）.reverse（）.forEach（tag=>{
var div=document.createElement（'div'）；
div.setAttribute（'class'，'tag'）；
var span=document.createElement（'span'）；
span.innerHTML=标记；
var closeIcon=document.createElement（'i'）；
closeIcon.innerHTML='close'；
setAttribute（'class'，'materialicons'）；
setAttribute（'data-item'，标记）；
子类（span）；
div.appendChild（closeIcon）；
高级财务主任（分区）；
});
//}
})
});
let input=document.querySelectorAll（'.tag container input'）；
input.forEach（函数（bar）{
bar.addEventListener（'keyup'，（e）=>{
如果（e.key=='Enter'）{
e、 target.value.split（'，'）.forEach（标记=>{
标签。推（标签）；
});
bar.querySelectorAll（'.tag'）.forEach（tag=>{
tag.parentElement.removeChild（tag）；
});
tags.slice（）.reverse（）.forEach（tag=>{
var div=document.createElement（'div'）；
div.setAttribute（'class'，'tag'）；
var span=document.createElement（'span'）；
span.innerHTML=标记；
var closeIcon=document.createElement（'i'）；
closeIcon.innerHTML='close'；
setAttribute（'class'，'materialicons'）；
setAttribute（'data-item'，标记）；
子类（span）；
div.appendChild（closeIcon）；
酒吧预售（分区）；
});
bar.value=''；
}
bar.focus（）；
})
});
函数单击（）{
警报（JSON.stringify（标记））；
}

.container{
宽度：20%；
利润率：40像素；
自对准：居中；
}
.标签容器{
边框：2个实心#ccc；
填充：10px；
边界半径：5px；
显示器：flex；
}
.标记容器.标记{
填充物：5px；
边框：1px实心#ccc；
显示器：flex；
对齐项目：居中；
保证金：5px；
边界半径：3px；
背景#f2f2；
盒影：0.4×rgba（0,0,0,0.2），插入0.1×1×fff；
游标：默认值；
}
.标签一{
字体大小：16px；
左边距：5px；
}
.标记容器输入{
弹性：1；
字体大小：16px；
填充物：5px；
大纲：无；
边界：0；
}

关闭
按钮
关闭
按钮
关闭
按钮

const tagContainerNodes=document.queryselectoral（“.tag container”）；
tagContainerNodes.forEach（（tagContainerNode）=>{
常量输入=tagContainerNode.querySelector（“输入”）；
input.addEventListener（“键控”，e=>{
如果（e.key==“输入”）{
createTag（例如target.value、tagContainerNode、input）；
e、 target.value=“”；
}
});
});
函数createTag（标记名、父标记名、前标记名）{
var div=document.createElement（“div”）；
div.setAttribute（“类”、“标记”）；
var span=document.createElement（“span”）；
span.innerHTML=标记名；
子类（span）；
parent.insertBefore（div，before）
}
函数单击（）{
常量allTagText=[]；
tagContainerNodes.forEach（（tagContainerNode）=>{
const tagNodes=tagContainerNode.queryselectoral（“.tag”）；
tagNodes.forEach（（tagNode）=>{
allTagText.push（tagNode.textContent）；
});
});
console.log（allTagText）；
}

.tag容器{
边框：2个实心#ccc；
填充：10px；
边界半径：5px；
显示器：flex；
}
.标记容器.标记{
填充物：5px；
边框：1px实心#ccc；
保证金：5px；
边界半径：3px；
背景#f2f2；
盒影：0.4×rgba（0,0,0,0.2），插入0.1×1×fff；
}
.标记容器输入{
字体大小：16px；
填充物：5px；
大纲：无；
边界：0；
}

按钮
按钮
按钮

您的答案就是解决方案。非常感谢你的帮助。