JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
    <h3>
        One
        <span class="action-button"><a class="ui-icon ui-icon-plusthick" href="http://example.com/index">Edit</a></span>
    </h3>
    <div id="one">
        contents
    </div>
    
    <h3>
        Two
        <span class="action-button"><a class="ui-icon ui-icon-plusthick" href="http://example.com">Edit</a></span>
    </h3>
    <div id="two">
        contents
    </div>
</div>

CSS

#accordion { margin-top: 25px; }
#accordion .action-button {
    float: right;
    display: none;
}
#accordion .ui-state-active .action-button {
    display: inline;
}

JavaScript

$(function(){
    $('#accordion').accordion();
    
    $('#accordion .action-button').hover(
        function() {
            $(this).addClass('ui-state-hover');
        },
        function() {
            $(this).removeClass('ui-state-hover');
        }
    );
    
    $('#accordion .action-button a').click(function () {
        // self.location.href = $(this).attr("href");
        alert('Clicked: '+$(this).attr("href"));
        return false;
    });
});