[Aetae]

Ну я бы вам советовал использовать сборку и компонентный подход.
Красиво по папочкам разложить куски, а потом импортировать их где надо. Но это потребует более глубокого изучения.
Попробуйте заюзать Vue, он довольно лёгок для понимания и применения.
Если нет - попробуйте шаблонизаторы по-проще, тот же handlebars например.
Ну а пока вот вам функция которая после загрузки ищет все элементы с одинаковым атрибутом data-id на странице и заполняет пустые из полных: https://jsfiddle.net/Lwoetghq/1/

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));
      })
    }
  }
})

P.S. По написанию доков мне больше всего понравилась сборка из отдельных файлов маркдауна с кастомными расширениями в живой сайт(пример), но это ещё более хитрая вещь.)