Dynamically add details to div

Adding data to div.

by abhishek_kumar_13092

HTML

<div id="container"></div>

CSS

.unitName {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  padding: 5px;
  margin: auto;
}

#mainContainer {
  width: 80%;
  padding: 5px;
  margin: 5px auto 5px;
  background: whitesmoke;
  align-items: center;
}

.roleName {
  background: crimson;
  width: 80%;
  text-align: center;
  font-weight: 600;
  color: white;
}

JavaScript

var JSONData = [{
  "name": "Jenkins",
  "location": "Pune",
  "role": "Testing",
  "branches": [{
    "name": "Jenkins_pune1",
    "location": "Pune_Hin",
    "role": "Testing_Automation",
    "id": "PUN_HINJE_T122"
  }, {
    "name": "Jenkins_pune2",
    "location": "Pune_DC",
    "role": "Testing_UI",
    "id": "PUN_DC_TDC121"
  }]
}, {
  "name": "UI/UX",
  "location": "Delhi",
  "role": "UI_Dev",
  "branches": [{
    "name": "UIUX_Del1",
    "location": "Del_Sec1",
    "role": "UI",
    "id": "Del_Sec1_T122"
  }, {
    "name": "UIUX_Del2",
    "location": "Del_Sec3",
    "role": "Testing_UI",
    "id": "Del_Sec3_TDC121"
  }]
}, {
  "name": "Back End",
  "location": "Mumbai",
  "role": "Dev",
  "branches": [{
    "name": "Dev_Mum1",
    "location": "Mum_Sec1",
    "role": "Dev",
    "id": "Mum_Sec1_Dv122"
  }, {
    "name": "Dev_Mum2",
    "location": "Mum_Sec3",
    "role": "Dev",
    "id": "Mum_Sec3_Dev21"
  }]
}]
var div = document.createElement('div');
div.id = "mainContainer";
div.className = "mainContainer";

var innerDiv = document.createElement('div');
innerDiv.id = "innerContainer";
innerDiv.className = "innerContainer"

JSONData.forEach(function(data, index) {
  div.innerHTML += '<div id=' + data.name +  ' class="unitName">' + '<p class="roleName">'+ data.name +'</p>' + '</div>';
  document.getElementById("container").appendChild(div);

	data.branches.forEach((branch)=>{
  	innerDiv.innerHTML += '<p id=' + branch.name +  ' class="branchName">' + branch.name + '</p>' 
    
    document.getElementById(data.name).appendChild(innerDiv);
  })
	
})