I am not sure how you go about styling a data attribute made in 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
}

What I am trying to style is the data-id="${id} for the edit and delete button. I did style the class edit and delete in 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;
}

That data-id="${id} is preventing the buttons from appearing, but I need it there as it tracks with the list ID and it can delete or edit the list.