I am working with Firestore and here is a problem I'm having.

I created a collection of docs and it's structure is like this:

const myArr = [
    {title: 'title 1',name: '10 name',age: 10},
    {title: 'title 2',name: '20 name',age: 20},
    {title: 'title 2',name: '21 name',age: 20},
    {title: 'title 2',name: '22 name',age: 20},
    {title: 'title 3',name: '30 name',age: 30}
]

I needed all unique titles so I created a set:

const unique = [...new Set(myArr.map(item => item.title))];

I added them to my dom so that each unique title would be a heading:

let wrapper = document.querySelector('#main');

for(let i = 0; i < unique.length; i++) {
    let myDiv = document.createElement('div');
    myDiv.className = 'unique_list';
    wrapper.appendChild(myDiv);
    myDiv.innerHTML = `<h3 data-title="${unique[i]}">${unique[i]}</h3><br><br>`;
}

Now I need to add to every "unique_list" div also all objects that are the same as this unique title so that each container would look somewhat like this:

<div class="unique_list" data-title="title 2">
    <h3>title 2</h3>
    <div>
        <p>name: 20 name</p>
        <p>age: 20</p>
    </div>
    <div>
        <p>name: 21 name</p>
        <p>age: 20</p>
    </div>
    <div>
        <p>name: 22 name</p>
        <p>age: 20</p>
    </div>
</div>

Currently I am stuck with nested for loops and no idea how to achieve this, I would much appreciate any suggestions, thanks.