JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="content"></div>
</body>

JavaScript

function myFunction()
{
var html=new String();
	$.getJSON('GroupID.json',function(data)
	{
		var h=new String();
		for(var i=0;i<data.length;i++)
		{
			h+='<div class="data">';
			
			h+=data[i]['group_option'].OptionsID+'<br>';
			h+=data[i]['group_option'].MenuGroupID+'<br>';
			h+=data[i]['group_option'].group_options_name+'<br>';
			
			for(var iter = 0; iter < data[i]['group_option']['option_items'].length; iter++)
			{
				
				h+=data[i]['group_option']['option_items'][iter]['item'].OptionItemID+'<br>';
				h+=data[i]['group_option']['option_items'][iter]['item'].option_name+'<br>';
				h+='<br><br><br>';
			}	
			h += '</div>';
		}
		alert("h");
		alert(h);	
		alert("html equals ");
		html=h;	
		alert(html);
		
	});
	
alert("returning html");
alert(html);
return html;
}

//this is my json data from my file 

[
{
	"group_option":
	{
		"OptionsID":"28",
		"MenuGroupID":"6",
		"group_options_name":"Select two (2) :",


		"option_items":
		[
			{
				"item":
				{
					"OptionItemID":"1",
					"option_name":"one"
					
				}
			},
			{
				"item":
				{
					"OptionItemID":"2",
					"option_name":"two"
					
				}
			},
			{
				"item":
				{
					"OptionItemID":"3",
					"option_name":"three"
					
				}
			},
			{
				"item":
				{
					"OptionItemID":"4",
					"option_name":"four"
					
				}
			},
			{
				"item":
				{
					"OptionItemID":"5",
					"option_name":"five"
					
				}
			}
		]
	}
}
]