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-right 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: $('.grocery-item_label', $this).html()

        });
    });

 alert(JSON.stringify(items));
});