JSFiddle - React, Tailwind, and code Playground

HTML

<div id="piece1"id>
    <img class="msg-link" data-id="test" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V" alt="" />
    <p id="textMessages">test<br />
        <a class="hidden" id="test" href="1.png" rel="group1" title="example title text">More View</a>
        <a class="hidden" id="koya" href="2.png" rel="group1" title="more text right here"></a>
    </p>
</div>

JavaScript

$(document).ready(function() {
    
    $("#textMessages").hide();
    $("#piece1").hover(

    function() {
        
        /*$("#" + id).hide();
        var id = $(this).data("id");
        if (id !== undefined) {
            $("#" + id).fadeIn("slow");
        }*/
        $("#textMessages").fadeIn("slow");

    }, function() {
        $("#textMessages").fadeOut("slow");
        /*$(".hidden").fadeOut("slow");*/
    });
});

function ShowHide() {
    alert('here');
    $("#textMessages").animate({
        "height": "toggle"
    }, {
        duration: 1000
    });
}