JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<input type="text" id="Num">
<input type="button" value="Insert Div" onClick="insertDiv(getElementById('Num').value)" />
<div class="container">
<div id="main">All starts from here</div>
</div>

CSS

.st{
  
  
}

JavaScript

lookupinput=[
{"id":2,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":16,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":8,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":5,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
];

function insertDiv(Num){
    var ar1=Num.replace('[', '');
    ar1=ar1.replace('[', '');
    ar1=ar1.replace(']', '');
    ar1=ar1.replace(']', '');
    alert(ar1);
    var array = JSON.parse("[" + ar1 + "]");
    //alert(JSON.stringify(input,null,2));
    var i=0;
		for(i;i<array.length;i++)
		{
			$( "<div id='sp"+array[i]+"'>This is div with id "+array[i]+"<div class='st'><h1>Hello"+array[i]+"</h1><div id='chart_d'></div></div></div>" ).insertAfter( "#main");
		}
    
}