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 () {

    // it is good to cache jquery objects, to save on expensive execution time
    $this = $(this);
    $this.css({ 'background-color': '#ffffff' });

    // also cache derived jquery objects...
    $siblings = $this.siblings('.portfolio-image-wrapper');
    // use the jquery wrapper function to select within a specific context
    $('.item-info-overlay', $siblings).css({ background: 'rgba(153, 153, 153, 0.2)' });
    // use `hide` instead of `.css({display: 'none'})`
    $('.edit-menu', $siblings).hide();

}, function () {
    
    $this = $(this);
    $this.css({ 'background-color': '#f5f5f5' });

    $siblings = $this.siblings('.portfolio-image-wrapper');
    
    $('.edit-menu', $siblings).show();    
    $('.item-info-overlay', $siblings).css({ background: 'none' });
    
});