JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="item">
        <div class="portfolio-image-wrapper"> <a class="hideModelLink" href="#">ModelLink</a>

            <img src="assets/img/gallery/2.jpg" alt="" />
            <div class="edit-menu"> <a href="#" target="_blank">Rename</a>
 <a href="#" target="_blank">Delete</a>

            </div>
            <div class="item-info-overlay"></div>
        </div>
        <div class="item-info">
             <h4 class="text-dark no-margin title semi-bold"><a class="" target="_blank" href="#">Creative Illustration</a></h4>

            <p>3/21/2014</p>
        </div>
<a class="edit-button">edit me</a>

    </li>
</ul>

JavaScript

$('.edit-button').toggle(function () {
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'none'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'rgba(153, 153, 153, 0.2)'
    });
    $(this).css({
        'background-color': '#ffffff'
    });
}, function () {
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'block'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'none'
    });
    $(this).css({
        'background-color': '#f5f5f5'
    });
});