JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  </head>

  <body>
  </body>
</html>

JavaScript

var jsonData = {
  "Airports": [{
      "listing": "East 34th Street Heliport",
      "iata": "TSS",
      "type": "heliport",
      "size": "tiny"
    },
    {
      "listing": "Blaine Municipal Airport",
      "iata": "BWS",
      "type": "closed",
      "size": "small"
    },
    {
      "listing": "Toronto City Airport",
      "iata": "YTZ",
      "type": "airport",
      "size": "medium"
    },
    {
      "listing": "Amsterdam Airport Schiphol",
      "iata": "AMS",
      "type": "airport",
      "size": "large"
    },
    {
      "listing": "Detroit County Airport",
      "iata": "DTW",
      "type": "airport",
      "size": "large"
    }
  ]
};

$(document).ready(function() {
	// Iterate over each airport
	jsonData.Airports.forEach(airport => {
  	colItem = `<div data-role='collapsible'><h2>${airport.listing}</h2>`;
    // Iterate over each airport key
  	Object.keys(airport).forEach(key => {
    	colItem += `<p>${key}: ${airport[key]}</p>`;
  	});
    colItem += '</div>';
    var html = $.parseHTML(colItem);
    $('body').append(colItem);
  });
});