JSFiddle - React, Tailwind, and code Playground

by Trupti

HTML

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

CSS

div { border: solid 1px #000; }

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 = ''
html = '<div>'
items.forEach(function(item) {
console.log(child+"|"+item.type)
  if (child != item.type && child) {
    html += '</div><div>'+ item.name;
  }
  else
  {
  html += item.name;
  }
  child = item.type;

})
html += '</div>';
console.log(html)
document.getElementById('html').innerHTML = html;