JSFiddle - React, Tailwind, and code Playground

HTML

<div data-id="один"></div>
<div data-id="один"></div>
<div data-id="два"></div>
<div data-id="один">1</div>
<div data-id="два"></div>
<div data-id="два">2</div>
<div data-id="один"></div>

CSS

div::before{
  content: attr(data-id) ': ';
}

JavaScript

addEventListener('DOMContentLoaded', function() {
  var forEach = Function.prototype.call.bind(Array.prototype.forEach);
  var attribute = 'data-id';
  var map = {};
  forEach(document.querySelectorAll('[' + attribute + ']'), function(element) {
    var id = element.getAttribute(attribute);
    if(!map[id]) map[id] = [];
    if(element.hasChildNodes()) {
      var fragment = document.createDocumentFragment();
      forEach(element.childNodes, function(node) {
        fragment.appendChild(node.cloneNode(true));
      });
      if(map[id].parent) {
        console.warn('[Два не-пустых элемента с одинаковым %s: %o и %o]', attribute, map[id].parent, element)
      }
      map[id].parent = element;
      map[id].fragment = fragment;
    } else {
      map[id].push(element);
    }
  });

  for(var id in map) {
    var fragment = map[id].fragment;
    if(fragment) {
      map[id].forEach(function(element) {
        element.appendChild(fragment.cloneNode(true));
      })
    }
  }
})