JSFiddle - React, Tailwind, and code Playground

HTML

<div id="html"></div>

JavaScript

var items = [{
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child2",
  "name": "2 "
}, {
  "type": "child2",
  "name": "2"
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3"
}]
var child = "";
var html = ''

items.forEach(function(item) {
  if (child !== item.type) {
    html += '<div>'
  }
  html += '<div>' + item.name + ' </div>';
  if (child !== item.type && child) {
    html += '</div>'
  }
  child = item.type;

})

document.getElementById('html').innerHTML = html;