JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>  
  
  //other content
</div>

JavaScript

var data = [ { "country" : "Germany", "capital" : "Berlin"}, { "country" : "Sweden", "capital" : "Stockholm"}, { "country" : "Italy", "capital" : "Rome"}, { "country" : "Japan", "capital" : "Tokyo"}, { "country" : "USA", "capital" : "Washington DC"} ];

let countries = data;

let capitalwrapper = document.querySelectorAll('.capital') 
for (var j = 0; j < countries.length; j++){
  capitalwrapper.forEach(function(elem) {
    let capital = countries[j].capital;
  	let span = document.createElement('span');
   	elem.innerHTML = capital;
  })
	
}