Highlight inheritance cancelled component in livecopy

[akhilat16351269]

Hi all,

I have a requirement to highlight the components that have cancelled inheritance in livecopy in edit mode. Can anyone help me to create an eventlistener for the same? On page, the inheritance cancelled component should be highlighted. and also whenever author has cancelled inheritance, it should be highlighted.

Thanks in advance. 

[akhilat16351269]

This is for Touch UI AEM 6.3.

[akhilat16351269]

I have tried below implementation. 

$( window ).load(function() {
$('#EditableToolbar').bind("DOMSubtreeModified",function(){
$( "#EditableToolbar .cq-editable-action" ).click(function() {
var data_path;
var data_action = $(this).attr('data-action');
if(data_action == 'MSM_REENABLE_INHERITANCE'){
data_path = $(this).attr('data-path');
$(document).on("click", ".coral-Button--primary", function (e) {

$(".cq-Overlay--container").find(".cq-Overlay--component[data-path='" + data_path + "']").attr('data-info', '222');

});
}
});
});

});

But newly added attribute is getting removed.