JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="link-1">Link 1</a>
<a href="#" id="link-2">Link 2</a>
<div id="output"></div>

CSS

a {
    transition: all 0.5s ease;
    padding:5px;
    background-color:#eee;
}

.active {
    background-color:aqua;
}

JavaScript

var $output = $('#output');

$('#link-1').click(function(){    
    var func = function(){
        $output.append('<div>Second output</div>');
    }
    $('#link-2').trigger('click',func);
});

$('#link-2').click(function(event,func){
    var $obj = $(this);
    $obj.toggleClass('active');

    $obj.one('transitionend', function(){
        $output.append('<div>First output</div>');
        func.call();
    });
    
});