AEM responsivegrid add customize button to editbar

Question

Sorry for the confusing title, I have a customized responsivegrid parsys, what I need here is to create a customize button besides default buttons, something like this (not really a copy button, I am just using this as a concept, in fact I wish to replace the button icon to default one too):

then when author clicks this button, it trigges a customized JS call to call an end point, something like this (I am using alert('test') as a concept here):

and my full code in edit config is something below:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[text:My Component,-,edit,delete,insert,copymove]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"
    cq:disableTargeting="{Boolean}true">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        aftercopy="function(path, definition) {CQ.Myproject.Component.superParentRefresh(this); alert('test');}"
        afterchilddelete="REFRESH_SELF"
        afterchildedit="REFRESH_SELF"
        afterchildinsert="REFRESH_SELF"/>
</jcr:root>

I was trying to follow http://www.sgaemsolutions.com/2019/01/ootbcustom-cqlisteners-in-cqeditconfig.html but not getting any luck to click that button and trigge JS alert... Any suggestions? some code sample would be helpful Thanks