JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4">
    <div class="grid-stack-item-content ui-draggable-handle" id="chart"></div>
    <div class="overlayed" data-render="" data-chartType="" data-devID="" data-metricType="" data-refresh="30000" data-title="" data-subtitle="" data-yAxis="" data-tooltip="" data-lineWidth="0.5" data-timeWindow="10"> <span class="glyphicon glyphicon-pencil panel-icons chart-edit" style="padding-right: 10px"></span>
 <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
 <span class="glyphicon glyphicon-trash panel-icons"></span>

    </div>
</div>

JavaScript

$('.overlayed').on('click', '.glyphicon-pencil', function (e) {
    e.preventDefault();
    e.stopPropagation();
    
    //hold the overlayed element for later use
    var overlayedData = $(this);
    var chartID = $(this).parent().prev().prop('id');

    alert(chartID);
});