Стилизовать отдельные элементы в бесконечном списке ⇐ CSS

[Anonymous]

У меня есть форма, которая заполняет вкладку «История» списком. Я хочу стилизовать каждую индивидуально. когда я пытаюсь сейчас, он создает все элементы списка как один элемент.
Я также хочу иметь возможность индивидуально стилизовать имя задачи и задачу.дата.
В конечном итоге я хочу, чтобы каждый элемент списка мог щелкните, а затем разверните, чтобы отобразить больше входных данных формы.

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

//displays the entered data, only the name and type in a list

function displayTask(task) {
let item = document.createElement("li");
item.setAttribute("data-id", task.id);
item.innerHTML = `[b]${task.name}[/b]${task.date}
`;
tasklist.appendChild(item);
//if statement for if clicked display more info?
form.reset();

// Setup the delete button DOM elements
let delButton = document.createElement("button");
let delButtonText = document.createTextNode("Delete");
delButton.appendChild(delButtonText);
item.appendChild(delButton); // Adds a delete button to every task

// Listen for when the delete button is clicked
delButton.addEventListener("click", function(event) {
// Remove the task item from the page when button clicked
// Because we used 'let' to define the item, this will delete the right element
item.remove();

//now we deleted the visual we need to delete it from the array
// Filter out the element corresponding with the list item and store the new task list
taskList = taskList.filter( task => task.id != item.getAttribute('data-id') )

// Make sure the deletion worked by logging out the whole array
console.log(taskList)
})
}
}

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

[list][/list]

Подробнее здесь: https://stackoverflow.com/questions/785 ... inite-list