JSFiddle - React, Tailwind, and code Playground

HTML

<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">         
<span id="container3" class="topButton">
<a href="" id="linktomouseover">+</a>   
</span>
<span id="container4" class="bottomButton">
<a href="" id="linktomouseover2">-</a>
</span>
</span>
</span>
    <span class="rightRapper">
        <span id="buttonColumn">         
        <span id="container" class="topButton">
        <a href="" id="linktomouseover3">+</a>   
        </span>
        <span id="container2" class="bottomButton">
        <a href="" id="linktomouseover4">-</a>
        </span>
        </span>
    </span>
</div>

CSS

body {
margin:0 auto;
top:0;
left:0;
height:100%;
width:100%;
background:url(images/bg.jpg);
}

#container {
width:24px;
height:24px;
display:block;
position:static;
opacity:1;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
background-color:#fff;
z-index:-1;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.topButton{
top:0;
left:0;
}
.bottomButton{
top:24px;
left:24;
}
#container.hover1 {
background-color: #E0E0E0; 
}

#container2.hover2 {
background-color: #E0E0E0;
}

.link {
position:inherit;
z-index:1;
float:right;
padding-top:100px;
}
#linktomouseover{
    margin-left:6px;
    color:black;
    text-decoration:none;
    z-index:1;
}
#buttonColumn{
    height:48px;
    width:24px;
    display:block;
    position:absolute;
    color:black;
    margin-top:15px;
}
#linktomouseover2{
    margin-left:6px;
    display:block;
    color:black;
    text-decoration:none;
}
#container2 {
width:24px;
height:24px;
position:static;
opacity:1;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
background-color:#fff;
z-index:-1;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
#battleBox{
border-style:solid;
border-color:black;  
width:210px;
height:100px;
}
.leftRapper{
border-right-style:dotted;
margin-left:15px;
}
#linktomouseover3{
    margin-left:7px;
    display:block;
    color:black;
    text-decoration:none;
}
#linktomouseover4{
    margin-left:8px;
    display:block;
    color:black;
    text-decoration:none;
}
.rightRapper{
border-style:dotted;
margin-left:105px;
margin-top:0px;
    height:90px;
    width:100px;
    display:block;
}
.leftRapper{
border-style:dotted;
margin-left:0px;
height:90px;
width:100px;
display:block;
}
#container3 {
width:24px;
height:24px;
display:block;
position:static;
opacity:1;
filter:alpha(opacity=40);
-moz-opacity:...

JavaScript

$(function() {
    $('#container').hover(function() {
        $('#container').addClass('hover1')
    }, function() {
        $('#container').removeClass('hover1')
    });
       $('#container2').hover(function() {
        $('#container2').addClass('hover2')
    }, function() {
        $('#container2').removeClass('hover2')
    });
    $('#container3').hover(function() {
        $('#container3').addClass('hover1')
    }, function() {
        $('#container3').removeClass('hover1')
    });
$('#container4').hover(function() {
        $('#container4').addClass('hover1')
    }, function() {
        $('#container4').removeClass('hover1')
    });
});