JSFiddle - React, Tailwind, and code Playground

by Austin Anderson

HTML

<textarea id="scrappedData"></textarea>
<br />
<button id="myBtn">Add Element</button>
<br />
<div id="patch-notes-container">
<section id="wrapper"></section>
</div>

CSS

.item {
  display: block;
  padding-bottom: 5px;
}

#patch-notes-container blockquote.blockquote.context:after {
    margin-left: 0;
}

#patch-notes-container blockquote.blockquote.context {
    font-size: 1em;
    border: none;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-family: "Gill Sans W04",GillSans,"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;
}

#patch-notes-container #cboxTitle {
    color:white;
}

#patch-notes-container .patch-change-block{
    padding-left: 104px;
    background-repeat: no-repeat;
    background-size: 64px auto;
    background-position: 20px 20px;
}

#patch-notes-container .change-title {
    padding-top: 0px;
    margin-top: 0px;
    font-size: 2em;
}

#patch-notes-container .skin-title {
    font-size: 1.3em;
    text-align: center;
}
#patch-notes-container .skin-box {
    margin-bottom: 10px;
}

#patch-notes-container .change-detail-title {
    font-size: 1.2em;
    margin-top: 20px;
}

#patch-notes-container .sub-section-title {
    font-size: 1.6em;
    font-weight: bold;
    color: #043A5C;
}

#patch-notes-container .patch-change-block .reference-link{
    display: block;
    position: absolute;
    width: 104px;
    height: auto;
    padding: 20px;
    top: 0;
    left: 0;
    text-decoration: none;
}

#patch-notes-container .context-designer {
    display: block;
    color: #940000;
    font-style: normal;
    text-align: right;
}

#patch-notes-container .context-designer img {
    margin-right: 3px;
    height: 24px;
    vertical-align: top;
}

#patch-notes-container .summary, #patch-notes-container .disclaimer{
    color: #777;
    font-style: italic;
    margin-bottom: 15px;
    margin-top: 0px;
}

#patch-notes-container .attribute-change{
    padding: 3px 0 3px 42px;
}

#patch-notes-container .attribute-change .attribute{
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .65em;
}

#patch-notes-container .attribute-change .attribute:after {
 ...

JavaScript

var counter = 0;
$('#myBtn').click(function(){    
		var data = $('#scrappedData').val();
    var parsed = JSON.parse(data);
    jQuery.each(parsed, function(i,d) {
    	if (!d['spells']) {
      return;
      }
    	jQuery.each(d['spells'], function(name, value) {
      console.log(name,value);
    		d['spells'][name] = JSON.parse(value['changes']);
        
        var div = $('<div class="item"></div>');    
    		div.appendTo('#wrapper');
        $(div).html(d['spells'][name]);
        
        ++counter;
			});
    });
    
    console.log(parsed);

});