No estoy seguro de cómo diseñar un atributo de datos creado en javascript.

 const createTask = () => { const id = createId() const task = elements.input.value; const date = elements.cal.value; if(!task && !date) return alert("Please fill in task and select date"); if(!task) return alert("Please fill in task"); if(!date) return alert("Please select date"); const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task" date-id = "${id}"> <div class="content"> <input type ="checkbox" class="tick"> <input type ="text" class = text id = "text" data-id="" readonly>${task} <label class = "due-date" for ="text">${date}</label> <input type ="date" class = date id = "date"> </div> <div class = "actions"> <button class="edit" data-id="${id}>Edit</button> <button class="delete" data-id="${id}>Delet</button> </div> </div> ` elements.list.appendChild(tasks) return tasks }

Lo que estoy tratando de diseñar es el data-id="${id} para el botón editar y eliminar. Diseñé la clase de edición y eliminación en CSS

CSS:

 .task .actions .edit { background-image: linear-gradient(to right, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .task .actions .edit { font-size: 0.8rem; margin-left: 3rem; margin-top: 1rem; } .task .actions .delete { color: crimson; }

Ese data-id="${id} impide que aparezcan los botones, pero lo necesito allí, ya que realiza un seguimiento con el ID de la lista y puede eliminar o editar la lista.