Как создавать поля с полями описания ⇐ Jquery

[Anonymous]

В настоящее время у меня возникла небольшая проблема с некоторой логикой CSS/JS, связанной с созданием коробки внутри коробки. Пример JsFiddle: https://jsfiddle.net/pa7wt2g3/
Я хочу создать 1 поле и, щелкнув его, создать под ним поле описания. однако в настоящее время все поля описания появляются внутри первого поля при создании дополнительных полей.
Я подозреваю, что мне придется присвоить каждому полю уникальный идентификатор, который позже будет использоваться для указания места размещения области описания, но как мне это сделать?

Код: Выделить всё

function textarea() { // Toggles dropdown and sets the dropdown and textfield as the same width as the created 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 () { // Run function when läggatill is clicked
var div = document.createElement('div'); // create div element
div.className = 'newrect'; // apply css
div.setAttribute("id", "crtdiv");

var button = document.createElement('button'); // create button element
button.setAttribute("id", "hej"); // Giving an id
var buttontext = document.createTextNode("X"); // Sets the button value
button.appendChild(buttontext); // Shows the value of the button
button.className = 'hej'; // apply css
button.setAttribute("onClick", "removeDiv(this)"); // runs the removeDiv funtion

var dropdown = document.createElement('dropdown'); // create dropdown element
dropdown.setAttribute("id", "dropdown"); // Giving an id
dropdown.className = 'dropdown'; //apply css
div.setAttribute("onClick","textarea()"); // Run textarea funtion

var ptext = document.createElement('p'); // create p element
var textnode = document.createTextNode("Add description"); // Sets the innerText of the p element
ptext.appendChild(textnode); // Shows the InnerText
ptext.className = 'text'; // apply css
ptext.setAttribute("id", "text"); // Giving an id

var textfield = document.createElement('Textarea'); // create textarea element
textfield.className = 'autoExpand'; // apply css
textfield.setAttribute("id", "textfield"); // Giving an id

var text = document.getElementById("myText").value; //take the value of the text field
div.innerHTML = text; // show text in the div
if (text === "") { // Shows every element if the textfield has text in it
return 0; // Returns nothing if the text field is empty
} else {
document.getElementsByTagName('span')[0].appendChild(div).appendChild(button);
document.getElementsByTagName('span')[0].appendChild(dropdown);
document.getElementsByClassName('dropdown')[0].appendChild(ptext);
document.getElementsByClassName('dropdown')[0].appendChild(textfield);
}
};
function removeDiv(elem) { // Removes div when pressing the button
$(elem).parent('div').remove();
}

Код: Выделить всё

/* Start of lägga till kompetens */

.newrect {
min-width: 55px;
max-width: 195px;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 1% 3%;
border: 1px solid green;
border-radius: 40px;
text-align: center;
float: left;
position: relative;
background-color: white;
z-index: 2;
cursor: pointer;
}

.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
position: absolute !important;
margin-top: 3%;
margin-right: 0%;
margin-left: 0.96%;
margin-bottom: 0%;
z-index: 1;
}

.show {
display: block;
} 

Код: Выделить всё

Document






 
 

Подробнее здесь: https://stackoverflow.com/questions/591 ... ion-fields