JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Compatible with minecraft version 15w36c -->
    <h3>Custom loot table generator</h3>
    <div id="content" elem-type="obj" class="json-elem">
        <div key-name="pools" id="pools" elem-type="array" template="pool" class="pool json-elem">
        </div>
        <input type="button" id="addPoll" value="Add pool" onclick="addTemplate(this.parentElement, 'pool');"> 
        <input type="text" id="table_input" value="Paste your loot table here" onFocus="this.value=''"> 
        <input type="button" id="import" value="Import" onclick="promptImport();"> 
    </div>
    
    <div>
        <label>Pretty print : <input id="prettyPrint" type="checkbox" checked onChange="rebuildOutput()"></label>
    </div>
    <div>
        <textarea id="output" rows="15" cols="80" readonly onClick="focusArea(this)"></textarea>
    </div>

    <div id="templates">
        <div class="tpl-none">
        
        </div>
        
        <div class="tpl-pool-elem nest-obj h-space">
            <div elem-type="obj" class="json-elem">
                Poll : <input type="button" value="X" onClick="removeNode(this)">
                <div key-name="rolls" elem-type="range" class="json-elem inline">
                    <label class="warp-skip">Min roll : <input type="text" key-name="min" elem-type="num" class="warp json-elem" value="1"></label>
                    <label class="warp-skip">Max roll : <input type="text" key-name="max" elem-type="num" class="warp json-elem" value="1"></label>
                </div>
                <div key-name="conditions" elem-type="array" template="cond" class="cond json-elem">
                </div>
                <div key-name="entries" elem-type="array" template="item" class="json-elem item">
                </div>
                <input type="button" value="Add Entry" onclick="addTemplate(this.parentElement.parentElement, 'item');">
                <input type="button" value="Add condition" onClick="addTemplate(this.parentElement.parentElement,...

CSS

#templates{
    display:none;
}

.h-space{
    display:block;
    margin-left:50px;
}

.inline{
    display: inline;
}

.data-error{
    box-shadow: 0px 0px 10px red;
}

input[elem-type=num], input[elem-type=float]{
    width:50px;
}

.long-content{
    width:300px;
}

JavaScript

var lootObj = {};
var hasError = false;
var importingProcess = false;

//Componenent
var templates = document.getElementById("templates");
var content = document.getElementById("content");
var pools = document.getElementById("pools");
var output = document.getElementById("output");

//Options
var prettyPrintChecbox = document.getElementById("prettyPrint");
var input = document.getElementById("table_input");


var itemIds =...