NeonMan,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-date] {
border: 1px solid red;
}
[data-date]:before {
content: attr(data-date);
background-color: #F0E68C;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const DATA = [{
title: 'title_1',
date: '06/02/2023'
},
{
title: 'title_2',
date: '06/02/2023'
},
{
title: 'title_3',
date: '07/02/2023'
},
{
title: 'title_4',
date: '07/02/2023'
},
{
title: 'title_5',
date: '08/02/2023'
},
{
title: 'title_6',
date: '08/02/2023'
},
];
const obj = {};
let div = document.createElement('div');
let arrHTML = DATA.reduce((arr, {
title,
date
}) => {
let clone = obj[date];
if (!clone) {
obj[date] = clone = div.cloneNode();
arr.push(clone);
clone.dataset.date = date
};
let child = div.cloneNode();
child.textContent = title;
clone.append(child);
return arr;
}, []);
document.body.append(...arrHTML)
})
</script>
</head>
<body>
</body>
</html>