JSFiddle - React, Tailwind, and code Playground

HTML

<div class="li_1" data-id="test">test</div>
<div class="li_1" data-id="test">test</div>
<div class="li_1" data-id="test">test</div>
<div class="li_1" data-id="test2">test</div>
<div class="li_1" data-id="test2">test</div>
<div class="li_1" data-id="test2">test</div>
<div class="li_1" data-id="test2">test</div>
<div class="li_1" data-id="test3">test</div>
<div class="li_1" data-id="test3">test</div>

CSS

div {
    
    padding: 0 0 20px;
    
}

JavaScript

var uniqueIds = [];
$(".li_1").each( function () {    
    var id = $(this).attr("data-id");
    if ( $.inArray( id, uniqueIds ) == -1 )
        uniqueIds.push( id )
});

for ( var i = 0; i < uniqueIds.length; i++ ) {    
    var allItems = $("[data-id='" + uniqueIds[i] + "']");    
    var firstItem = allItems.eq(0);
    var restItems = allItems.not(":eq(0)");    
    restItems.appendTo( firstItem )
}