JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li class="header">Quick Access:</li>
    <li>        
        <a id="itemLink" href="#">Add Item</a>
        <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif">
    </li>
    <li>
        <a id="adminLink" href="#">Add Administrator</a>
        <img id="menuIMG" class="qaimg" src="images/icon_trace.gif">
    </li>
</ul>
<div id="main">
     <h1>Actions Required:</h1>

    <div id="forms">
        <table id="addItem" class="linkForm" style="display: none;">
            <tr>
                <td>addItemTable</td>
            </tr>
        </table>
        <table id="addAdmin" class="linkForm" style="display: none;">
            <tr>
                <td>addAdminTable</td>
            </tr>
        </table>
    </div>
</div>

CSS

.linkForm {
    background-color: red;
}

JavaScript

$(document).ready(function () {
    $("#adminLink").click(function(event) {
        event.preventDefault();
        change("#menuIMG", '#addAdmin');
    });

    $("#itemLink").click(function(event) {
        event.preventDefault();
        change("#Mitemimg", '#addItem');
    });

});

function change(imgId, divId) {
    // reset img src
    $('.qaimg').attr('src', 'images/icon_trace.gif');
    
    // set img src
    $(imgId).attr("src", "images/icon_sync.gif");
    
    // slide up all
    $('#forms .linkForm').slideUp('slow', function() {
        // slide down div
        $(divId).slideDown('slow', function() {});
    });
}