Javascript 如何创建包含描述字段的框

我目前在一些CSS/JS逻辑方面遇到了一个小问题，即在一个盒子的内部创建一个盒子。JSFIDLE示例：

我想创建一个框，单击该框后，在其下创建一个描述字段。但是，当前在创建其他框时，描述字段都出现在第一个框中

我怀疑我必须给每个盒子一个uniqe ID，该ID稍后用于指定在何处放置描述区域，但我该如何做呢

function textarea（）{//切换下拉列表，并将下拉列表和文本字段设置为与创建的div相同的宽度
document.getElementById（'dropdown'）.classList.toggle（“show”）；
style=window.getComputedStyle（crtdiv）；
wdt=style.getPropertyValue（'width'）；
dropdown.style.width=wdt；
}
document.getElementById（“läggatill”）.onclick=function（）{//单击läggatill时运行函数
var div=document.createElement（'div'）；//创建div元素
div.className='newrect'；//应用css
div.setAttribute（“id”、“crtdiv”）；
var button=document.createElement（'button'）；//创建按钮元素
setAttribute（“id”，“hej”）；//给出一个id
var buttontext=document.createTextNode（“X”）；//设置按钮值
button.appendChild（buttontext）；//显示按钮的值
button.className='hej'；//应用css
setAttribute（“onClick”，“removeDiv（this）”；//运行removeDiv函数
var dropdown=document.createElement（'dropdown'）；//创建dropdown元素
setAttribute（“id”，“dropdown”）；//提供一个id
dropdown.className='dropdown'；//应用css
div.setAttribute（“onClick”，“textarea（）”；//运行textarea函数
var ptext=document.createElement（'p'）；//创建p元素
var textnode=document.createTextNode（“添加描述”）；//设置p元素的内部文本
ptext.appendChild（textnode）；//显示内部文本
ptext.className='text'；//应用css
ptext.setAttribute（“id”，“text”）；//提供一个id
var textfield=document.createElement（'Textarea'）；//创建Textarea元素
textfield.className='autoExpand'；//应用css
textfield.setAttribute（“id”，“textfield”）；//提供一个id
var text=document.getElementById（“myText”）.value；//获取文本字段的值
div.innerHTML=text；//在div中显示文本
if（text==“”）{//如果textfield中有文本，则显示每个元素
返回0；//如果文本字段为空，则不返回任何内容
}否则{
document.getElementsByTagName（'span'）[0].appendChild（div）.appendChild（按钮）；
document.getElementsByTagName（'span'）[0].appendChild（下拉菜单）；
document.getElementsByClassName（'dropdown'）[0].appendChild（ptext）；
document.getElementsByClassName（'dropdown'）[0].appendChild（textfield）；
}
};
函数removeDiv（elem）{//按下按钮时删除div
$（elem）.parent（'div'）.remove（）；
}

/*从洛加开始到科姆皮滕斯*/
newrect先生{
最小宽度：55px；
最大宽度：195px；
利润率最高：1%；
保证金权利：1%；
左缘：1%；
利润底部：0%；
填充：1%3%；
边框：1px纯绿色；
边界半径：40px；
文本对齐：居中；
浮动：左；
位置：相对位置；
背景色：白色；
z指数：2；
光标：指针；
}
.下拉列表{
显示：无；
背景色：暗灰色；
高度：400px；
位置：绝对！重要；
利润率最高：3%；
右边距：0%；
左缘：0.96%；
利润底部：0%；
z指数：1；
}
.show{
显示：块；
}

文件

您是对的-所有ID都必须是唯一的。为了实现这一点，您必须重构大部分代码。例如，

textarea

功能是通过单击添加的框来触发的-这很好。问题是函数不知道实际单击了哪个框-它引用了一个具有固定ID“dropdown”的元素。由于有多个元素具有相同的ID，因此无法知道需要展开哪个框。 您可以简单地将

this

作为参数传递给此函数并引用上下文，但是您必须考虑到这样一个事实，即您使用的是在函数范围之外声明的全局变量

dropbox

我重写了整件事。这就是我实现这个特性的方式。我看到您在几行中使用了jQuery，因此我的代码很大程度上依赖于它。如果您不能在最终项目中使用jQuery，请告诉我，我将发布纯香草JS版本。我还必须做一些小小的CSS更改（flexbox）

小提琴：

片段：

$（文档）.ready（（）=>{
//您可以在这里使用ID，因为这些元素是唯一的
常量$addBtn=$（“#läggatill”）；
const$inputBox=$（“#myText”）；
常量$flexBox=$（“#flexBox”）；
$addBtn。单击（（）=>{
//创建一个包含我们需要的所有内容的新框，并将其保存到变量中
//我使用ES6模板字符串嵌入$inputBox的值
const$box=$(`
${$inputBox.val（）}
X
添加说明

`);
//为box元素添加事件监听器
$box.find（“.hej”）。单击（函数（）{
//正在删除父.box包装DIV
$（this）.closed（“.box”）.remove（）；
});
$box.find（“.newrect”）。单击（（）=>{
const$dropdown=$box.find（“.dropdown”）；
//如果下拉列表不可见，则显示它。否则，将其隐藏
if（$dropdown.css（“display”）=“none”）{
$box.find（“.dropdown”）.show（）；
}否则{
$box.find（“.dropdown”）.hide（）；
}
});
//将框附加到fle