I encountered a strange issue where the input box in the HTML was not allowing me to type anything.
const para = document.createElement('p')
const innerCard = document.getElementsByClassName('attach')
for(let i = 0; i < innerCard.length; i ++){
innerCard[i].addEventListener('click',createInput)
innerCard[i].addEventListener('dblclick',hide)
}
function hide(){
para.style.display = 'none'
for(let i = 0; i < innerCard.length; i ++){
innerCard[i].removeEventListener('mouseout',hide)
}
}
function createInput(){
let input = document.createElement('input');
para.innerText = 'Topics'
para.className = "blem'
innerCard[0].appendChild(para)
para.appendChild(input)
para.style.display = 'grid'
for(let i = 0; i < innerCard.length; i ++){
innerCard[i].removeEventListener('mouseover',createInput)
}
}
full code: https://jsfiddle.net/nj7ne83y/3/