JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testing" style="width:798px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;">
    <div style="width:798px; margin-left:auto;background:#c4e6a8; margin-right:auto; height:250px;overflow:hidden;" name="test1">
        <img src="/images/testimage.png" alt="Image is visible" width="798" height="250" name="swap"/>
    </div>
    <div class="hidden" style="width:798px;background:#e6b0a8; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;" name="test2">
        Div named "test2" is visible.
    </div>
</div>

     <img src="../../images/labortab.png" alt="labor" style="float:left; width:38px; height:125px;" id="labor" />
<img src="../../images/odctab.png" alt="odc" style="float:left; width:38px; height:125px;" id="odc" />

CSS

.hidden {display:none;}

JavaScript

$(function(){
        $('#labor').click(function(){
            $('div[name=test1]').addClass('hidden');
            $('div[name=test2]').removeClass('hidden');
        });

        $('#odc').click(function(){
            $('div[name=test1]').removeClass('hidden');
            $('div[name=test2]').addClass('hidden');
        });
    });