JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" key-name="null" class="json-elem type-obj">
        <div key-name="pools" class="pool json-elem type-array">
        </div>
        <input type="button" id="addPoll" value="Add pool" onclick="addTemplate(this.parentElement, 'pool');">        
    </div>
    
    <div>
        <textarea id="output" rows="5" cols="80" readonly onClick="focusArea(this)"></textarea>
    </div>

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

CSS

#templates{
    display:none;
}

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

.type-num{
    width:50px;
}

.type-float{
    width:50px;
}

.inline{
    display: inline;
}

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

JavaScript

var lootObj = {};
var hasError = false;

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


var itemIds =...