JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grocery_items" data-gs-height="4" data-gs-width="4" data-gs-x="10" data-gs-y="6">
    <div class="grocery_item_label">
        <div class="column-left feedcontainer" id="sodium"></div>
    </div>
</div>
<div class="grocery_items" data-gs-height="4" data-gs-width="4" data-gs-x="10" data-gs-y="6">
    <div class="grocery_item_label">
        <div class="column-right feedcontainer" id="protein"></div>
    </div>
</div>

JavaScript

$(function () {
    var items = [];
    $('.grocery_items').each(function () {
        var $this = $(this);
        items.push({
            x: $this.attr('data-gs-x'),
            y: $this.attr('data-gs-y'),
            w: $this.attr('data-gs-width'),
            h: $this.attr('data-gs-height'),
            content: $($this).find('.grocery_item_label').html()

        });
    });

    console.log(JSON.stringify(items));
});