JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="saveThis()">save it!</button>
<div id="canvas" class="ui-droppable">
    <div name="Rij 1" dir="lr" id="row_1" class="obstacle cv_row_lr rows ui-draggable ui-droppable" style="position: absolute; left: 30px; top: 120px;">
        <div class="row_name_lr row_names" id="row_name_select_1" style="float: left;"><span>Rij 1</span>

        </div>
        <div class="cv_chest" chest_counter="1" id="chest_1_1" chest_height="3"><span class="stapel_counter">1</span><span class="stapel_height">3</span>

        </div>
        <div class="cv_chest" chest_counter="2" id="chest_1_2" chest_height="3"><span class="stapel_counter">2</span><span class="stapel_height">3</span>

        </div>
        <div class="cv_chest" chest_counter="3" id="chest_1_3" chest_height="3"><span class="stapel_counter">3</span><span class="stapel_height">3</span>

        </div>
        <div class="cv_chest" chest_counter="4" id="chest_1_4" chest_height="3"><span class="stapel_counter">4</span><span class="stapel_height">3</span>

        </div>
        <div class="cv_chest" chest_counter="5" id="chest_1_5" chest_height="3"><span class="stapel_counter">5</span><span class="stapel_height">3</span>

        </div>
    </div>
    <div name="Rij 2" dir="lr" id="row_2" class="obstacle cv_row_lr rows ui-draggable ui-droppable" style="position: absolute; left: 30px; top: 200px;">
        <div class="row_name_lr row_names" id="row_name_select_2" style="float: left;"><span>Rij 2</span>

        </div>
        <div class="cv_chest" chest_counter="1" id="chest_2_1" chest_height="6"><span class="stapel_counter">1</span><span class="stapel_height">6</span>

        </div>
        <div class="cv_chest" chest_counter="2" id="chest_2_2" chest_height="6"><span class="stapel_counter">2</span><span class="stapel_height">6</span>

        </div>
        <div class="cv_chest" chest_counter="3" id="chest_2_3" chest_height="6"><span class="stapel_counter">3</span><span class="stapel_height">6</span>

     ...

JavaScript

function saveThis() {
    var bewaarNaam = "Bewaar Naam!";

    var dataRows = [{
        'bewaarnaam': bewaarNaam
    }];

    $(".rows").each(function (i, obj) {
        var row = $(obj);
        var rowName = $(row).attr('name');
        var chests = [];

        $(".cv_chest", row).each(function (i2, obj2) {
            log("another chest with id: " + $(obj2).attr('id'));
            chests[$(obj2).attr('id')] = [{
                'counter': $(obj2).attr('chest_counter'),
                    'height': $(obj2).attr('chest_height')
            }];
        });

        log(JSON.stringify(chests));

        var rowData = [{
            rowName: [{
                'name': $(row).attr('name'),
                    'x': $(row).css('left'),
                    'y': $(row).css('top'),
                    'chests': chests
            }]
        }];

        dataRows[$(row).attr('id')] = rowData;
    });

    log(JSON.stringify(dataRows));

    // Going to send some data with ajax now...
}

function log(msg) {
    console.log(msg);
}