This question made my mind really busy.

I have a set of tags like below

<a class='c1'>1</a>
<a class='c2'>2</a>
<a class='c3'>3</a>
<a class='c1'>4</a>
<a class='c1'>5</a>
<a class='c3'>6</a>
<a class='c2'>7</a>

What I need to do is to start from above and group elements together by class so that I can add a collapse to the elements. so the final results should be like this:

<div class='collapse'>
 <a class='c1'>1</a>
 <a class='c1'>4</a>
 <a class='c1'>5</a>
</div>
<div class='collapse'>
 <a class='c2'>2</a>
 <a class='c2'>7</a>
</div>
<div class='collapse'>
 <a class='c3'>3</a>
 <a class='c3'>6</a>
</div>

I have tried JS scripts with tones of variable that is really hacky and does not work. Is there a simple and clean way to do this?

thanks.

>Solution :

You can do it this way

for(let i = 1; i<=3; i++){
    let tags = document.querySelectorAll(`.c${i}`);
    let div = document.createElement('div');
        div.classList = 'collapse';
    tags.forEach(tag =>{
        div.appendChild(tag);
    });
    document.body.appendChild(div);
}

/* CSS just to demonstrate */
.collapse {
  margin-block: 1rem;
  border: blue solid 3px;
  display:flex;
  flex-direction: column;
}

<a class='c1'>1</a>
<a class='c2'>2</a>
<a class='c3'>3</a>
<a class='c1'>4</a>
<a class='c1'>5</a>
<a class='c3'>6</a>
<a class='c2'>7</a>